@rangertechnologies/ngnxt 2.1.251 → 2.1.253

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, InjectionToken, EventEmitter, Inject, Output, Pipe, Optional, forwardRef, ChangeDetectionStrategy, Input, ViewChildren, ViewChild, HostListener, inject, signal, ViewEncapsulation, HostBinding, NgModule, computed, APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Injectable, Component, Optional, EventEmitter, forwardRef, ChangeDetectionStrategy, Input, Output, ViewChildren, ViewChild, HostListener, inject, Pipe, signal, ViewEncapsulation, HostBinding, Inject, computed, APP_INITIALIZER, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import * as i5 from '@angular/forms';
 import { FormControl, FormArray, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i4 from '@angular/common';
-import { DOCUMENT, CommonModule, NgIf, NgClass, NgFor } from '@angular/common';
+import { CommonModule, NgIf, DOCUMENT, NgClass, NgFor } from '@angular/common';
 import * as i5$1 from '@danielmoncada/angular-datetime-picker';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import { QuillEditorComponent } from 'ngx-quill';
@@ -18,7 +18,7 @@ import { MatSort } from '@angular/material/sort';
 import { SelectionModel } from '@angular/cdk/collections';
 import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i3 from '@angular/google-maps';
+import * as i2 from '@angular/google-maps';
 import { GoogleMapsModule } from '@angular/google-maps';
 import * as i1$1 from '@angular/platform-browser';
 import * as i7 from '@angular/cdk/bidi';
@@ -3956,82 +3956,6 @@ const BOOKQUESTION = {
     },
 };
 
-// HA 19DEC23 File created for translation
-const i18nConfigService = new InjectionToken('i18nConfig');
-
-// HA 19DEC23 File created for translation
-class I18nService {
-    langList;
-    document;
-    dropdownChanged = new EventEmitter();
-    currentLanguage = '';
-    constructor(langList, document) {
-        this.langList = langList;
-        this.document = document;
-        this.initLang();
-    }
-    initLang() {
-        if (localStorage.getItem('lang')) {
-            this.currentLanguage = localStorage.getItem('lang');
-            if (this.currentLanguage === 'rtl') {
-                this.languageChange(this.currentLanguage);
-            }
-        }
-        else {
-            localStorage.setItem('lang', 'EN');
-            this.currentLanguage = 'ltr';
-        }
-    }
-    getString(key) {
-        // HA 28DEC23 added ternary to avoid exceptions
-        // VD 23JAN24 added ternary to avoid exceptions
-        return this.langList[this.langList.map((e, i) => e.lang === this.currentLanguage ? i : null).filter(e => e !== null)[0]]?.file?.default[key];
-    }
-    languageChange(lang) {
-        this.currentLanguage = lang;
-        let htmlTag = this.document.getElementsByTagName('html')[0];
-        htmlTag.dir = this.currentLanguage === 'rtl' ? 'rtl' : 'ltr';
-        localStorage.setItem('lang', lang);
-        this.dropdownChanged.emit(this.currentLanguage);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nService, deps: [{ token: i18nConfigService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [i18nConfigService]
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { dropdownChanged: [{
-                type: Output
-            }] } });
-
-// HA 19DEC23 File created for translation
-class I18nPipe {
-    i18nService;
-    constructor(i18nService) {
-        this.i18nService = i18nService;
-    }
-    transform(value, ...args) {
-        if (value) {
-            return this.i18nService.getString(value);
-        }
-        return value;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nPipe, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: I18nPipe, isStandalone: true, name: "i18n" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'i18n',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: I18nService }] });
-
 class ChangeWrapper {
     fromQuestionId;
     fromQuestionName;
@@ -6987,7 +6911,7 @@ class NxtInput {
                 useExisting: forwardRef(() => NxtInput),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "dtPicker", first: true, predicate: ["dt"], descendants: true }, { propertyName: "dPicker", first: true, predicate: ["dt2"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "inputEls", predicate: ["inputEl"], descendants: true }, { propertyName: "dateTimePicker", predicate: ["dt"], descendants: true }, { propertyName: "datePicker", predicate: ["dt1"], descendants: true }, { propertyName: "timePicker", predicate: ["dt2"], 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      }\"  [style.font-weight]=\"labelWeight ||  type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n       style=\"display: flex; gap: 5px;\"> {{ label\n      }}\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\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\"\n        style=\"position: relative; width: 100%;\">\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 width=\"18\" height=\"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-size]=\"inputValueSize\">{{ 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        @if(type !== 'datetime' && type !== 'date' && type !== 'time'){\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' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n          [ngClass]=\"{'fcOtp': type === 'otp','custom-input': type !== 'otp','hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable' }\"\n          [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? 'none' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : type === 'checkbox' ? 'auto' : inputWidth\"\n          [style.padding]=\"from === 'nxtTable' ? '0px' : ''\"\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\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\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 : '',\n              '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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'){\n          <input #inputEl [id]=\"inputId\"\n            [type]=\"type\"\n            [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || 'HH:MM'\"\n            [ngClass]=\"'nxt-custom-input'\" [ngClass]=\"{'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\"\n            [formControl]=\"control\"\n            [style.backgroundColor]=\"mode !== 'edit' ? '' : 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]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n            (input)=\"onInputChange($event)\"\n            [ngStyle]=\"{\n              '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n              '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n              '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n              '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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        }\n        @else if(type === 'datetime' || type === 'date'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'nxt-custom-input'\" [ngClass]=\"{'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\"\n          [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : 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]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          (dateTimeInput)=\"onInputChange($event)\"\n          [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        }\n        <div *ngIf=\"mode !== 'edit'\" class=\"hyperlink-overlay\" (click)=\"hyperLink ? onClickHyperlink($event) : ''\"\n        style=\" position: absolute; top: 0; left: 0; width: 94%; height: 100%; z-index: 5; \"></div>      \n        <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date')\" (click)=\"openDatePicker(type)\"\n        style=\"cursor: pointer;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n            <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.0329 1.5V3.96809\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.97435 1.5V3.96809\" stroke=\"#292D32\" 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=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div *ngIf=\"mode === 'edit' && type === 'list'\">\n          <!-- Minimal Dotted Loader -->\n          <div *ngIf=\"isLoading\" class=\"dotted-loader\" 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          <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n            <path d=\"M9.16992 14.8299L14.8299 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M14.8299 14.8299L9.16992 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>            \n        </div>\n        <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n          [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\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        <svg *ngIf=\"mode === 'edit' && type === 'dropdown'\" style=\"margin-right: 5px;\"  (mousedown)=\"toggle($event); $event.preventDefault()\"\n          xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M8.46997 10.64L12 14.16L15.53 10.64\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\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        <svg *ngIf=\"mode !== 'edit' && !question.isReadOnly && from !== 'nxtTable' \" 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        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n          style=\"padding-right: 5px; display: flex; align-items: center;\">\n          <svg *ngIf=\"!isSaveHovered\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n          </svg>\n\n          <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n              fill=\"#259566\" />\n            <path\n              d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n              fill=\"white\" />\n          </svg>\n        </div>\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\"\n          style=\" display: flex; align-items: center;\">\n          <svg *ngIf=\"!isDiscardHovered\" 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\n          <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\"\n            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n              fill=\"#FF3636\" />\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-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\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' || question.isReadOnly\"\n          (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n          [modules]=\"getQuillModules(question.id)\"\n          [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n          style=\"width: 100%;\n          border-radius: 5px;\n          border: none;\n          font-size: 14px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content\" [innerHTML]=\"value\"\n        [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n        style=\"width: 100%;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\"\n          [ngClass]=\"{ 'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : 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\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [readOnly]=\"mode !== 'edit' || question.isReadOnly\" [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n          }\" \n          [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 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') && !question.isReadOnly\"\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      </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>", 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}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}.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}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.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:10px;height:10px}.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{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}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{border:none;padding:0;font-size:14px;line-height:1.6;color:#333;overflow:hidden}.quill-view-content *{max-width:100%;box-sizing:border-box;word-wrap:break-word}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#999!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}.hyperlink-input{color:inherit;text-decoration:none;cursor:default;width:200px;height:40px;background:#eef;border:1px solid #888}.hyperlink-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;z-index:2}.input-wrapper:hover .hyperlink-input{color:#00f!important;text-decoration:underline!important;cursor:pointer}.input-container{pointer-events:auto!important;position:relative;z-index:1}.custom-input,.nxt-custom-input{pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: OwlDateTimeModule }, { kind: "directive", type: i5$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i5$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i5$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "ngmodule", type: OwlNativeDateTimeModule }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "dtPicker", first: true, predicate: ["dt"], descendants: true }, { propertyName: "dPicker", first: true, predicate: ["dt2"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "inputEls", predicate: ["inputEl"], descendants: true }, { propertyName: "dateTimePicker", predicate: ["dt"], descendants: true }, { propertyName: "datePicker", predicate: ["dt1"], descendants: true }, { propertyName: "timePicker", predicate: ["dt2"], 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      }\"  [style.font-weight]=\"labelWeight ||  type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n       style=\"display: flex; gap: 5px;\"> {{ label\n      }}\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\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\"\n        style=\"position: relative; width: 100%;\">\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 width=\"18\" height=\"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-size]=\"inputValueSize\">{{ 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        @if(type !== 'datetime' && type !== 'date' && type !== 'time'){\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' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n          [ngClass]=\"{'fcOtp': type === 'otp','custom-input': type !== 'otp','hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable' }\"\n          [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? 'none' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : type === 'checkbox' ? 'auto' : inputWidth\"\n          [style.padding]=\"from === 'nxtTable' ? '0px' : ''\"\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\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\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 : '',\n              '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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'){\n          <input #inputEl [id]=\"inputId\"\n            [type]=\"type\"\n            [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || 'HH:MM'\"\n            [ngClass]=\"'nxt-custom-input'\" [ngClass]=\"{'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\"\n            [formControl]=\"control\"\n            [style.backgroundColor]=\"mode !== 'edit' ? '' : 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]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n            (input)=\"onInputChange($event)\"\n            [ngStyle]=\"{\n              '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n              '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n              '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n              '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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        }\n        @else if(type === 'datetime' || type === 'date'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'nxt-custom-input'\" [ngClass]=\"{'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\"\n          [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : 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]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          (dateTimeInput)=\"onInputChange($event)\"\n          [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        }\n        <div *ngIf=\"mode !== 'edit'\" class=\"hyperlink-overlay\" (click)=\"hyperLink ? onClickHyperlink($event) : ''\"\n        style=\" position: absolute; top: 0; left: 0; width: 94%; height: 100%; z-index: 5; \"></div>      \n        <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date')\" (click)=\"openDatePicker(type)\"\n        style=\"cursor: pointer;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n            <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.0329 1.5V3.96809\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.97435 1.5V3.96809\" stroke=\"#292D32\" 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=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div *ngIf=\"mode === 'edit' && type === 'list'\">\n          <!-- Minimal Dotted Loader -->\n          <div *ngIf=\"isLoading\" class=\"dotted-loader\" 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          <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n            <path d=\"M9.16992 14.8299L14.8299 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M14.8299 14.8299L9.16992 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>            \n        </div>\n        <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n          [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\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        <svg *ngIf=\"mode === 'edit' && type === 'dropdown'\" style=\"margin-right: 5px;\"  (mousedown)=\"toggle($event); $event.preventDefault()\"\n          xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M8.46997 10.64L12 14.16L15.53 10.64\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\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        <svg *ngIf=\"mode !== 'edit' && !question.isReadOnly && from !== 'nxtTable' \" 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        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n          style=\"padding-right: 5px; display: flex; align-items: center;\">\n          <svg *ngIf=\"!isSaveHovered\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n          </svg>\n\n          <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n              fill=\"#259566\" />\n            <path\n              d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n              fill=\"white\" />\n          </svg>\n        </div>\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\"\n          style=\" display: flex; align-items: center;\">\n          <svg *ngIf=\"!isDiscardHovered\" 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\n          <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\"\n            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n              fill=\"#FF3636\" />\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-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\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' || question.isReadOnly\"\n          (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n          [modules]=\"getQuillModules(question.id)\"\n          [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n          style=\"width: 100%;\n          border-radius: 5px;\n          border: none;\n          font-size: 14px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content\" [innerHTML]=\"value\"\n        [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n        style=\"width: 100%;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\"\n          [ngClass]=\"{ 'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : 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\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [readOnly]=\"mode !== 'edit' || question.isReadOnly\" [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n          }\" \n          [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 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') && !question.isReadOnly\"\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      </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>", 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}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}.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}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.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:10px;height:10px}.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{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}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{border:none;padding:0;font-size:14px;line-height:1.6;color:#333;overflow:hidden}.quill-view-content *{max-width:100%;box-sizing:border-box;word-wrap:break-word}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#999!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}.hyperlink-input{color:inherit;text-decoration:none;cursor:default;width:200px;border:1px solid #888}.hyperlink-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;z-index:2}.input-wrapper:hover .hyperlink-input{color:#00f!important;text-decoration:underline!important;cursor:pointer}.input-container{pointer-events:auto!important;position:relative;z-index:1}.custom-input,.nxt-custom-input{pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: OwlDateTimeModule }, { kind: "directive", type: i5$1.OwlDateTimeTriggerDirective, selector: "[owlDateTimeTrigger]", inputs: ["owlDateTimeTrigger", "disabled"] }, { kind: "directive", type: i5$1.OwlDateTimeInputDirective, selector: "input[owlDateTime]", inputs: ["required", "owlDateTime", "owlDateTimeFilter", "_disabled", "min", "max", "selectMode", "rangeSeparator", "value", "values"], outputs: ["dateTimeChange", "dateTimeInput"], exportAs: ["owlDateTimeInput"] }, { kind: "component", type: i5$1.OwlDateTimeComponent, selector: "owl-date-time", inputs: ["backdropClass", "panelClass", "startAt", "endAt", "pickerType", "pickerMode", "disabled", "opened", "scrollStrategy"], outputs: ["afterPickerClosed", "beforePickerOpen", "afterPickerOpen", "yearSelected", "monthSelected", "dateSelected"], exportAs: ["owlDateTime"] }, { kind: "ngmodule", type: OwlNativeDateTimeModule }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtInput, decorators: [{
             type: Component,
@@ -7002,7 +6926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => NxtInput),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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      }\"  [style.font-weight]=\"labelWeight ||  type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n       style=\"display: flex; gap: 5px;\"> {{ label\n      }}\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\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\"\n        style=\"position: relative; width: 100%;\">\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 width=\"18\" height=\"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-size]=\"inputValueSize\">{{ 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        @if(type !== 'datetime' && type !== 'date' && type !== 'time'){\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' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n          [ngClass]=\"{'fcOtp': type === 'otp','custom-input': type !== 'otp','hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable' }\"\n          [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? 'none' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : type === 'checkbox' ? 'auto' : inputWidth\"\n          [style.padding]=\"from === 'nxtTable' ? '0px' : ''\"\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\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\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 : '',\n              '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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'){\n          <input #inputEl [id]=\"inputId\"\n            [type]=\"type\"\n            [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || 'HH:MM'\"\n            [ngClass]=\"'nxt-custom-input'\" [ngClass]=\"{'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\"\n            [formControl]=\"control\"\n            [style.backgroundColor]=\"mode !== 'edit' ? '' : 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]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n            (input)=\"onInputChange($event)\"\n            [ngStyle]=\"{\n              '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n              '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n              '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n              '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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        }\n        @else if(type === 'datetime' || type === 'date'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'nxt-custom-input'\" [ngClass]=\"{'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\"\n          [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : 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]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          (dateTimeInput)=\"onInputChange($event)\"\n          [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        }\n        <div *ngIf=\"mode !== 'edit'\" class=\"hyperlink-overlay\" (click)=\"hyperLink ? onClickHyperlink($event) : ''\"\n        style=\" position: absolute; top: 0; left: 0; width: 94%; height: 100%; z-index: 5; \"></div>      \n        <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date')\" (click)=\"openDatePicker(type)\"\n        style=\"cursor: pointer;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n            <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.0329 1.5V3.96809\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.97435 1.5V3.96809\" stroke=\"#292D32\" 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=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div *ngIf=\"mode === 'edit' && type === 'list'\">\n          <!-- Minimal Dotted Loader -->\n          <div *ngIf=\"isLoading\" class=\"dotted-loader\" 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          <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n            <path d=\"M9.16992 14.8299L14.8299 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M14.8299 14.8299L9.16992 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>            \n        </div>\n        <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n          [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\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        <svg *ngIf=\"mode === 'edit' && type === 'dropdown'\" style=\"margin-right: 5px;\"  (mousedown)=\"toggle($event); $event.preventDefault()\"\n          xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M8.46997 10.64L12 14.16L15.53 10.64\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\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        <svg *ngIf=\"mode !== 'edit' && !question.isReadOnly && from !== 'nxtTable' \" 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        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n          style=\"padding-right: 5px; display: flex; align-items: center;\">\n          <svg *ngIf=\"!isSaveHovered\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n          </svg>\n\n          <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n              fill=\"#259566\" />\n            <path\n              d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n              fill=\"white\" />\n          </svg>\n        </div>\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\"\n          style=\" display: flex; align-items: center;\">\n          <svg *ngIf=\"!isDiscardHovered\" 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\n          <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\"\n            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n              fill=\"#FF3636\" />\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-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\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' || question.isReadOnly\"\n          (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n          [modules]=\"getQuillModules(question.id)\"\n          [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n          style=\"width: 100%;\n          border-radius: 5px;\n          border: none;\n          font-size: 14px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content\" [innerHTML]=\"value\"\n        [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n        style=\"width: 100%;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\"\n          [ngClass]=\"{ 'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : 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\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [readOnly]=\"mode !== 'edit' || question.isReadOnly\" [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n          }\" \n          [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 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') && !question.isReadOnly\"\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      </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>", 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}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}.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}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.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:10px;height:10px}.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{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}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{border:none;padding:0;font-size:14px;line-height:1.6;color:#333;overflow:hidden}.quill-view-content *{max-width:100%;box-sizing:border-box;word-wrap:break-word}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#999!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}.hyperlink-input{color:inherit;text-decoration:none;cursor:default;width:200px;height:40px;background:#eef;border:1px solid #888}.hyperlink-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;z-index:2}.input-wrapper:hover .hyperlink-input{color:#00f!important;text-decoration:underline!important;cursor:pointer}.input-container{pointer-events:auto!important;position:relative;z-index:1}.custom-input,.nxt-custom-input{pointer-events:auto!important}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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      }\"  [style.font-weight]=\"labelWeight ||  type === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n       style=\"display: flex; gap: 5px;\"> {{ label\n      }}\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\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.margin-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\"\n        style=\"position: relative; width: 100%;\">\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 width=\"18\" height=\"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-size]=\"inputValueSize\">{{ 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        @if(type !== 'datetime' && type !== 'date' && type !== 'time'){\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' ? '' : placeholder || (type === 'tel' ? removeDialCode(selectedCountry.placeholder) : label)\"\n          [ngClass]=\"{'fcOtp': type === 'otp','custom-input': type !== 'otp','hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable' }\"\n          [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : from === 'nxtTable' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : from === 'nxtTable' ? 'none' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : type === 'checkbox' ? 'auto' : inputWidth\"\n          [style.padding]=\"from === 'nxtTable' ? '0px' : ''\"\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\" (focus)=\"type === 'otp' ? handleFocus($event) : null\"\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 : '',\n              '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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'){\n          <input #inputEl [id]=\"inputId\"\n            [type]=\"type\"\n            [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || 'HH:MM'\"\n            [ngClass]=\"'nxt-custom-input'\" [ngClass]=\"{'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\"\n            [formControl]=\"control\"\n            [style.backgroundColor]=\"mode !== 'edit' ? '' : 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]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n            [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n            (input)=\"onInputChange($event)\"\n            [ngStyle]=\"{\n              '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n              '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n              '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n              '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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        }\n        @else if(type === 'datetime' || type === 'date'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'nxt-custom-input'\" [ngClass]=\"{'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\"\n          [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : 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]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          (dateTimeInput)=\"onInputChange($event)\"\n          [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\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        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        }\n        <div *ngIf=\"mode !== 'edit'\" class=\"hyperlink-overlay\" (click)=\"hyperLink ? onClickHyperlink($event) : ''\"\n        style=\" position: absolute; top: 0; left: 0; width: 94%; height: 100%; z-index: 5; \"></div>      \n        <div *ngIf=\"mode === 'edit' && (type === 'datetime' || type === 'date')\" (click)=\"openDatePicker(type)\"\n        style=\"cursor: pointer;\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\n            <path d=\"M2.32031 7.05285H15.6883\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 9.98254H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 9.98254H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 9.98254H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.3322 12.8976H12.3392\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9.00408 12.8976H9.01103\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.66815 12.8976H5.67509\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M12.0329 1.5V3.96809\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M5.97435 1.5V3.96809\" stroke=\"#292D32\" 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=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>\n        </div>\n        <div *ngIf=\"mode === 'edit' && type === 'list'\">\n          <!-- Minimal Dotted Loader -->\n          <div *ngIf=\"isLoading\" class=\"dotted-loader\" 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          <svg *ngIf=\"!isLoading\" (click)=\"removeValue()\" (keydown.enter)=\"removeValue()\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" style=\"cursor: pointer;\">\n            <path d=\"M9.16992 14.8299L14.8299 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M14.8299 14.8299L9.16992 9.16992\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n          </svg>            \n        </div>\n        <label class=\"checkboxLab\" *ngIf=\"label && type === 'checkbox' && showLabel\" [style.font-weight]=\"labelWeight\"\n          [style.font-size]=\"labelSize\" [style.color]=\"labelColor || '#9a9a9a'\"\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        <svg *ngIf=\"mode === 'edit' && type === 'dropdown'\" style=\"margin-right: 5px;\"  (mousedown)=\"toggle($event); $event.preventDefault()\"\n          xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\">\n          <path d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\" stroke=\"#292D32\"\n            stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          <path d=\"M8.46997 10.64L12 14.16L15.53 10.64\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n            stroke-linejoin=\"round\" />\n        </svg>\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        <svg *ngIf=\"mode !== 'edit' && !question.isReadOnly && from !== 'nxtTable' \" 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        <!-- SKS14JUN25 Show save and cancel icons only when the input value is edited -->\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n          style=\"padding-right: 5px; display: flex; align-items: center;\">\n          <svg *ngIf=\"!isSaveHovered\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n          </svg>\n\n          <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n              fill=\"#259566\" />\n            <path\n              d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n              fill=\"white\" />\n          </svg>\n        </div>\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\"\n          style=\" display: flex; align-items: center;\">\n          <svg *ngIf=\"!isDiscardHovered\" 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\n          <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\"\n            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n              fill=\"#FF3636\" />\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-top]=\"showLabel && label ? '' : from === 'nxtTable' || from === 'normalDropDown' ? '' : '21px !important'\"\n        [style.border-radius]=\"mode !== 'edit' && from === 'nxtTable' ? 'none': ''\"\n        [style.padding-left]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.padding-right]=\"mode !== 'edit' && from === 'nxtTable' ? '0px' : ''\"\n        [style.backgroundColor]=\"mode === 'edit' ? from === 'nxtTable' ? '' : inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? from === 'nxtTable' ? '1px solid #d2d2d2' : inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\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' || question.isReadOnly\"\n          (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n          [modules]=\"getQuillModules(question.id)\"\n          [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n          style=\"width: 100%;\n          border-radius: 5px;\n          border: none;\n          font-size: 14px;\">\n        </quill-editor>\n        <!-- View mode -->\n        <div *ngIf=\"mode !== 'edit' && type === 'richtext'\" class=\"quill-view-content\" [innerHTML]=\"value\"\n        [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 5px'\"\n        style=\"width: 100%;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"from === 'nxtTable' ? 1 : rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\"\n          [ngClass]=\"{ 'hyperlink-input': hyperLink,'from-nxt-table': from === 'nxtTable'}\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : 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\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [readOnly]=\"mode !== 'edit' || question.isReadOnly\" [ngStyle]=\"{\n            '--placeholder-font': mode === 'edit' ? placeholderFont || labelFont : '',\n            '--placeholder-color': mode === 'edit' ? placeholderColor || '#9a9a9a' : '',\n            '--placeholder-size': mode === 'edit' ? placeholderSize || inputValueSize : '',\n            '--placeholder-weight': mode === 'edit' ? placeholderWeight || labelWeight : ''\n          }\" \n          [style.padding]=\"from === 'nxtTable' ? '0px' : '10px 10px 10px 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') && !question.isReadOnly\"\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      </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>", 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}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}.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}.checkbox-padding{margin-top:20px!important;padding:13px!important;width:100%!important;border:none!important}.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:10px;height:10px}.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{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}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{border:none;padding:0;font-size:14px;line-height:1.6;color:#333;overflow:hidden}.quill-view-content *{max-width:100%;box-sizing:border-box;word-wrap:break-word}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}input:disabled,textarea:disabled,.quill-view-content{color:#999!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}.hyperlink-input{color:inherit;text-decoration:none;cursor:default;width:200px;border:1px solid #888}.hyperlink-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;z-index:2}.input-wrapper:hover .hyperlink-input{color:#00f!important;text-decoration:underline!important;cursor:pointer}.input-container{pointer-events:auto!important;position:relative;z-index:1}.custom-input,.nxt-custom-input{pointer-events:auto!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ElementRef }, { type: ChangeService }, { type: DataService }], propDecorators: { label: [{
                 type: Input
             }], labelFont: [{
@@ -7291,7 +7215,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class CustomDropdownComponent {
     changeService;
     dataService;
-    i18nService;
     options = [];
     placeholder;
     apiMeta;
@@ -7310,10 +7233,9 @@ class CustomDropdownComponent {
     valueChange = new EventEmitter();
     dropdownWrapper;
     invalidFieldIds = [];
-    constructor(changeService, dataService, i18nService) {
+    constructor(changeService, dataService) {
         this.changeService = changeService;
         this.dataService = dataService;
-        this.i18nService = i18nService;
         this.changeService.submitValidate$.subscribe((data) => {
             // to get the error message's field id's
             this.invalidFieldIds.push(data);
@@ -7493,7 +7415,7 @@ class CustomDropdownComponent {
             this.valueChange.emit({ question: ques, value: change });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDropdownComponent, deps: [{ token: ChangeService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomDropdownComponent, isStandalone: true, selector: "app-custom-dropdown", inputs: { options: "options", placeholder: "placeholder", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", question: "question", referenceField: "referenceField", token: "token", mode: "mode", from: "from" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownWrapper", first: true, predicate: ["dropdownWrapper"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #dropdownWrapper class=\"dropdown-close\">\n  <nxt-input \n  [type]=\"'dropdown'\"\n  [mode]=\"mode\"\n  [from]=\"from\"\n  [value]=\"selectedValue\"\n  (onFocus)=\"getOptions()\"\n  [labelFont]=\"question?.font\"\n  [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\"\n  [labelColor]=\"question?.fontColor\"\n  [labelSize]=\"question?.fontSize\"\n  [inputValueSize]=\"question?.fontSize\"\n  [labelWeight]=\"question?.fontWeight\"\n  [inputWeight]=\"question?.fontWeight\"\n  [showLabel]=\"question?.style?.showLabel\"\n  inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n  [placeholder]=\"placeholder\"\n  [required]=\"question?.isOptional\" [inputBgColor]=\" from === 'normalDropDown' ? '#eff8ff' : '#FAFAFA'\"\n  [inputId]=\"question?.trackingId\"\n  [errorMessages]=\"{ required: 'This field is required' }\"\n  [inputIconLeftSrc]=\"question?.iconLeftSrc\"\n  (toggleEmit)=\"toggle()\"\n  (clearInputEmit)=\"clearSelection()\"\n  [question]=\"question\"\n  (inputValue)=\"inputValue($event.value,$event.question)\"\n  >\n</nxt-input>\n\n  <!-- SKS11JUN25 Dropdown list -->\n  <ul class=\"nxt-dropdown-menu\" *ngIf=\"showOptions && options.length > 0\">\n    <li *ngFor=\"let item of options\" (mousedown)=\"selectChange(item)\">\n      {{ apiObj && !apiObj.isDependentField && item[labelField] ? item[labelField] : item?.value }}\n    </li>\n  </ul>\n</div>\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.dropdown-close{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "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", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDropdownComponent, decorators: [{
@@ -7501,7 +7423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'app-custom-dropdown', standalone: true, imports: [
                         CommonModule, FormsModule, NxtInput, NxtCustomTranslatePipe
                     ], template: "<div #dropdownWrapper class=\"dropdown-close\">\n  <nxt-input \n  [type]=\"'dropdown'\"\n  [mode]=\"mode\"\n  [from]=\"from\"\n  [value]=\"selectedValue\"\n  (onFocus)=\"getOptions()\"\n  [labelFont]=\"question?.font\"\n  [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\"\n  [labelColor]=\"question?.fontColor\"\n  [labelSize]=\"question?.fontSize\"\n  [inputValueSize]=\"question?.fontSize\"\n  [labelWeight]=\"question?.fontWeight\"\n  [inputWeight]=\"question?.fontWeight\"\n  [showLabel]=\"question?.style?.showLabel\"\n  inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n  [placeholder]=\"placeholder\"\n  [required]=\"question?.isOptional\" [inputBgColor]=\" from === 'normalDropDown' ? '#eff8ff' : '#FAFAFA'\"\n  [inputId]=\"question?.trackingId\"\n  [errorMessages]=\"{ required: 'This field is required' }\"\n  [inputIconLeftSrc]=\"question?.iconLeftSrc\"\n  (toggleEmit)=\"toggle()\"\n  (clearInputEmit)=\"clearSelection()\"\n  [question]=\"question\"\n  (inputValue)=\"inputValue($event.value,$event.question)\"\n  >\n</nxt-input>\n\n  <!-- SKS11JUN25 Dropdown list -->\n  <ul class=\"nxt-dropdown-menu\" *ngIf=\"showOptions && options.length > 0\">\n    <li *ngFor=\"let item of options\" (mousedown)=\"selectChange(item)\">\n      {{ apiObj && !apiObj.isDependentField && item[labelField] ? item[labelField] : item?.value }}\n    </li>\n  </ul>\n</div>\n<span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">{{ errorMessage }}</span>\n", styles: [".shengel-custom-select-wrapper{position:relative}.nxt-dropdown-menu{position:absolute;z-index:10;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;width:100%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;display:flex;cursor:pointer}.nxt-dropdown-menu li:hover{background-color:#f0f0f0}.invalid .shengel-custom-select{border-color:red}.shengel-custom-select{width:100%;padding-right:50px}.dropdown-close{position:relative}\n"] }]
-        }], ctorParameters: () => [{ type: ChangeService }, { type: DataService }, { type: I18nService }], propDecorators: { options: [{
+        }], ctorParameters: () => [{ type: ChangeService }, { type: DataService }], propDecorators: { options: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -8283,7 +8205,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class PickLocationComponent {
-    i18nService;
     ngZone;
     cdr;
     latitude = null;
@@ -8306,8 +8227,7 @@ class PickLocationComponent {
     apiKey; // HA10012024 declared Api key to src
     constructor(
     // private mapsAPILoader: MapsAPILoader,
-    i18nService, ngZone, cdr) {
-        this.i18nService = i18nService;
+    ngZone, cdr) {
         this.ngZone = ngZone;
         this.cdr = cdr;
     }
@@ -8470,15 +8390,15 @@ class PickLocationComponent {
     closeModal() {
         this.showModal = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickLocationComponent, deps: [{ token: I18nService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PickLocationComponent, isStandalone: true, selector: "app-pick-location", inputs: { address: "address", from: "from", question: "question", mode: "mode", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n  <nxt-input [type]=\"'location'\" [mode]=\"mode\" [value]=\"address\" [from]=\"from\"\n    [labelFont]=\"question?.font\" [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\" [labelColor]=\"question?.fontColor\"\n    [labelSize]=\"question?.fontSize\" [inputValueSize]=\"question?.fontSize\" [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" [showLabel]=\"question?.style?.showLabel\" inputBorder=\"none\" svgHeight=\"20px\"\n    svgWidth=\"20px\" [placeholder]=\"question?.question\" [required]=\"question?.isOptional\" inputBgColor=\"#FAFAFA\"\n    [inputId]=\"question?.trackingId\" [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" (nativeInputRef)=\"setInputRef($event)\">\n  </nxt-input>\n  <a *ngIf=\"mode === 'edit' && !question.isReadOnly\" (click)=\"openMap()\" style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n    {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\n</div>\n\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' | i18n:i18nService.currentLanguage }}</h4>\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n      </div>\n      <google-map [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\n        <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\n      </google-map>\n    </div>\n  </div>\n</div>", styles: ["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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i3.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: i3.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: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "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", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickLocationComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PickLocationComponent, isStandalone: true, selector: "app-pick-location", inputs: { address: "address", from: "from", question: "question", mode: "mode", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n  <nxt-input [type]=\"'location'\" [mode]=\"mode\" [value]=\"address\" [from]=\"from\"\n    [labelFont]=\"question?.font\" [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\" [labelColor]=\"question?.fontColor\"\n    [labelSize]=\"question?.fontSize\" [inputValueSize]=\"question?.fontSize\" [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" [showLabel]=\"question?.style?.showLabel\" inputBorder=\"none\" svgHeight=\"20px\"\n    svgWidth=\"20px\" [placeholder]=\"question?.question\" [required]=\"question?.isOptional\" inputBgColor=\"#FAFAFA\"\n    [inputId]=\"question?.trackingId\" [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" (nativeInputRef)=\"setInputRef($event)\">\n  </nxt-input>\n  <a *ngIf=\"mode === 'edit' && !question.isReadOnly\" (click)=\"openMap()\" style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n    {{ 'pickLocation' | nxtCustomTranslate : 'pickLocation' }}</a>\n</div>\n\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]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\n        <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\n      </google-map>\n    </div>\n  </div>\n</div>", styles: ["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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: GoogleMapsModule }, { kind: "component", type: i2.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: i2.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: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "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", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickLocationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-pick-location', standalone: true, imports: [
-                        CommonModule, I18nPipe, GoogleMapsModule, FormsModule, NxtInput, NxtCustomTranslatePipe
-                    ], template: "<div>\n  <nxt-input [type]=\"'location'\" [mode]=\"mode\" [value]=\"address\" [from]=\"from\"\n    [labelFont]=\"question?.font\" [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\" [labelColor]=\"question?.fontColor\"\n    [labelSize]=\"question?.fontSize\" [inputValueSize]=\"question?.fontSize\" [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" [showLabel]=\"question?.style?.showLabel\" inputBorder=\"none\" svgHeight=\"20px\"\n    svgWidth=\"20px\" [placeholder]=\"question?.question\" [required]=\"question?.isOptional\" inputBgColor=\"#FAFAFA\"\n    [inputId]=\"question?.trackingId\" [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" (nativeInputRef)=\"setInputRef($event)\">\n  </nxt-input>\n  <a *ngIf=\"mode === 'edit' && !question.isReadOnly\" (click)=\"openMap()\" style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n    {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\n</div>\n\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' | i18n:i18nService.currentLanguage }}</h4>\n        <button class=\"close-button\" (click)=\"closeModal()\">X</button>\n      </div>\n      <google-map [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\n        <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\n      </google-map>\n    </div>\n  </div>\n</div>", styles: ["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: I18nService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { searchElementRef: [{
+                        CommonModule, GoogleMapsModule, FormsModule, NxtInput, NxtCustomTranslatePipe
+                    ], template: "<div>\n  <nxt-input [type]=\"'location'\" [mode]=\"mode\" [value]=\"address\" [from]=\"from\"\n    [labelFont]=\"question?.font\" [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText) : ''\" [labelColor]=\"question?.fontColor\"\n    [labelSize]=\"question?.fontSize\" [inputValueSize]=\"question?.fontSize\" [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" [showLabel]=\"question?.style?.showLabel\" inputBorder=\"none\" svgHeight=\"20px\"\n    svgWidth=\"20px\" [placeholder]=\"question?.question\" [required]=\"question?.isOptional\" inputBgColor=\"#FAFAFA\"\n    [inputId]=\"question?.trackingId\" [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" (nativeInputRef)=\"setInputRef($event)\">\n  </nxt-input>\n  <a *ngIf=\"mode === 'edit' && !question.isReadOnly\" (click)=\"openMap()\" style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\n    {{ 'pickLocation' | nxtCustomTranslate : 'pickLocation' }}</a>\n</div>\n\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]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\n        <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\n      </google-map>\n    </div>\n  </div>\n</div>", styles: ["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: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { searchElementRef: [{
                 type: ViewChild,
                 args: ['search', { static: true }]
             }], address: [{
@@ -52119,7 +52039,6 @@ class NxtSearchBox {
     storageService;
     changeService;
     dataService;
-    i18nService;
     countryService;
     elementRef;
     placeHolderText = '';
@@ -52152,11 +52071,10 @@ class NxtSearchBox {
     trackByFn = (index, item) => {
         return item.id || item.name || index;
     };
-    constructor(storageService, changeService, dataService, i18nService, countryService, elementRef) {
+    constructor(storageService, changeService, dataService, countryService, elementRef) {
         this.storageService = storageService;
         this.changeService = changeService;
         this.dataService = dataService;
-        this.i18nService = i18nService;
         this.countryService = countryService;
         this.elementRef = elementRef;
         if (this.question?.input && typeof this.question?.input === 'object' && !Array.isArray(this.question?.input)) {
@@ -52536,8 +52454,8 @@ class NxtSearchBox {
     removeValueEmit() {
         this.clickItem(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtSearchBox, deps: [{ token: StorageService }, { token: ChangeService }, { token: DataService }, { token: I18nService }, { token: CountryService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtSearchBox, isStandalone: true, selector: "nxt-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", mode: "mode", from: "from" }, outputs: { searchValueChange: "searchValueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "searchWrapper", first: true, predicate: ["searchWrapper"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\" #searchWrapper>\n  <nxt-input \n    [type]=\"'list'\" \n    [mode]=\"mode\" \n    [from]=\"from\"\n    [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n    [labelFont]=\"question?.font\" \n    [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n    [labelColor]=\"question?.fontColor\"\n    [labelSize]=\"question?.fontSize\" \n    [inputValueSize]=\"question?.fontSize\" \n    [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" \n    [showLabel]=\"question?.style?.showLabel\" \n    inputBorder=\"none\" \n    svgHeight=\"20px\"\n    svgWidth=\"20px\" \n    [placeholder]=\"placeHolderText\" \n    [required]=\"question?.isOptional\" \n    inputBgColor=\"#FAFAFA\"\n    [inputId]=\"question?.trackingId\" \n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" \n    (inputValue)=\"getSourceDataLocal($event); inputValue($event.value, $event.question)\" \n    (onFocus)=\"onInputFocus()\"\n    (onBlur)=\"onInputBlur()\"\n    [showSuggestion]=\"showSuggestion\" \n    ariaOwns=\"selectList\" \n    ariaHasPopup=\"listbox\" \n    [isLoading]=\"isLoading\" \n    [question]=\"question\"\n    (removeValueEmit)=\"removeValueEmit()\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\" *ngIf=\"showSuggestion\">\n    <div *ngIf=\"finalResults().length > 0\" class=\"nxt-suggestions-container\">\n      <div *ngFor=\"let item of finalResults(); trackBy: trackByFn\" \n           (click)=\"clickItem(item)\" \n           class=\"suggestion-item\" \n           role=\"option\"\n           tabindex=\"0\"\n           (keydown.enter)=\"clickItem(item)\"\n           (keydown.space)=\"clickItem(item)\">\n        <div class=\"item-content\">\n          <div class=\"item-details\">\n            <div *ngIf=\"item.thumbnail\" class=\"thumbnail-wrapper\">\n              <img [src]=\"item.thumbnail\" [alt]=\"item.name + ' avatar'\" />\n            </div>\n            <div class=\"item-text\">\n              <!-- Primary text (first key) -->\n              <ng-container *ngIf=\"getKeys(getValues(item, SearchItem)).length > 0\">\n                <div class=\"item-name primary\" \n                     [innerHTML]=\"highlightText(getValues(item, SearchItem)[getKeys(getValues(item, SearchItem))[0]], searchKeyWord)\">\n                </div>\n              </ng-container>\n              \n              <!-- Secondary text (remaining keys) -->\n              <div class=\"item-secondary\" *ngIf=\"getKeys(getValues(item, SearchItem)).length > 1\">\n                <ng-container *ngFor=\"let key of getKeys(getValues(item, SearchItem)); let i = index\">\n                  <ng-container *ngIf=\"i > 0\">\n                    <span class=\"secondary-text\" \n                          [innerHTML]=\"highlightText(getValues(item, SearchItem)[key], searchKeyWord)\">\n                    </span>\n                    <span class=\"separator\" *ngIf=\"i < getKeys(getValues(item, SearchItem)).length - 1\"> | </span>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"noResult && searchKeyWord\" class=\"no-results\">\n      <div class=\"no-results-content\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n          <path d=\"m21 21-4.35-4.35\"></path>\n        </svg>\n        <p>{{ 'NO_RESULTS_FOUND' | nxtCustomTranslate : 'No results found for' }} \"{{searchKeyWord}}\"</p>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".search-wrapper{position:relative;width:100%}.suggestion-wrapper{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000001a;z-index:10;max-height:300px;overflow:hidden}.nxt-suggestions-container{max-height:300px;overflow-y:auto;min-width:100%}.suggestion-item{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .2s ease;outline:none}.suggestion-item:hover,.suggestion-item:focus{background-color:#f5f5f5}.suggestion-item:last-child{border-bottom:none}.item-content{padding:5px}.item-details{display:flex;align-items:flex-start;gap:12px;text-align:left}.thumbnail-wrapper{flex-shrink:0}.thumbnail-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #e0e0e0}.item-text{flex:1;min-width:0}.item-name{font-size:14px;font-weight:500;color:#333;line-height:1.4;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word}.item-secondary{font-size:12px;color:#666;line-height:1.3;display:flex}.secondary-text{display:inline}.separator{color:#999;margin:0 3px}.no-results{padding:20px;text-align:center;color:#666}.no-results-content{display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column}.no-results-content svg{color:#d1d5db;margin-bottom:8px}.no-results-content p{color:#6b7280;margin:0;font-size:14px;font-weight:500}:host ::ng-deep .highlight{font-weight:700;display:inline}.nxt-suggestions-container::-webkit-scrollbar{width:6px}.nxt-suggestions-container::-webkit-scrollbar-track{background:#f1f1f1}.nxt-suggestions-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.nxt-suggestions-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.suggestion-wrapper,.nxt-suggestions-container{max-height:250px}.item-content{padding:10px 12px}.item-details{gap:8px}.thumbnail-wrapper img{width:32px;height:32px}.item-name{font-size:13px}.item-secondary{font-size:11px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "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", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtSearchBox, deps: [{ token: StorageService }, { token: ChangeService }, { token: DataService }, { token: CountryService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtSearchBox, isStandalone: true, selector: "nxt-search-box", inputs: { placeHolderText: "placeHolderText", question: "question", apiMeta: "apiMeta", id: "id", readOnly: "readOnly", mode: "mode", from: "from" }, outputs: { searchValueChange: "searchValueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "searchWrapper", first: true, predicate: ["searchWrapper"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\" #searchWrapper>\n  <nxt-input \n    [type]=\"'list'\" \n    [mode]=\"mode\" \n    [from]=\"from\"\n    [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n    [labelFont]=\"question?.font\" \n    [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n    [labelColor]=\"question?.fontColor\"\n    [labelSize]=\"question?.fontSize\" \n    [inputValueSize]=\"question?.fontSize\" \n    [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" \n    [showLabel]=\"question?.style?.showLabel\" \n    inputBorder=\"none\" \n    svgHeight=\"20px\"\n    svgWidth=\"20px\" \n    [placeholder]=\"placeHolderText\" \n    [required]=\"question?.isOptional\" \n    inputBgColor=\"#FAFAFA\"\n    [inputId]=\"question?.trackingId\" \n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" \n    (inputValue)=\"getSourceDataLocal($event); inputValue($event.value, $event.question)\" \n    (onFocus)=\"onInputFocus()\"\n    (onBlur)=\"onInputBlur()\"\n    [showSuggestion]=\"showSuggestion\" \n    ariaOwns=\"selectList\" \n    ariaHasPopup=\"listbox\" \n    [isLoading]=\"isLoading\" \n    [question]=\"question\"\n    (removeValueEmit)=\"removeValueEmit()\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\" *ngIf=\"showSuggestion\">\n    <div *ngIf=\"finalResults().length > 0\" class=\"nxt-suggestions-container\">\n      <div *ngFor=\"let item of finalResults(); trackBy: trackByFn\" \n           (click)=\"clickItem(item)\" \n           class=\"suggestion-item\" \n           role=\"option\"\n           tabindex=\"0\"\n           (keydown.enter)=\"clickItem(item)\"\n           (keydown.space)=\"clickItem(item)\">\n        <div class=\"item-content\">\n          <div class=\"item-details\">\n            <div *ngIf=\"item.thumbnail\" class=\"thumbnail-wrapper\">\n              <img [src]=\"item.thumbnail\" [alt]=\"item.name + ' avatar'\" />\n            </div>\n            <div class=\"item-text\">\n              <!-- Primary text (first key) -->\n              <ng-container *ngIf=\"getKeys(getValues(item, SearchItem)).length > 0\">\n                <div class=\"item-name primary\" \n                     [innerHTML]=\"highlightText(getValues(item, SearchItem)[getKeys(getValues(item, SearchItem))[0]], searchKeyWord)\">\n                </div>\n              </ng-container>\n              \n              <!-- Secondary text (remaining keys) -->\n              <div class=\"item-secondary\" *ngIf=\"getKeys(getValues(item, SearchItem)).length > 1\">\n                <ng-container *ngFor=\"let key of getKeys(getValues(item, SearchItem)); let i = index\">\n                  <ng-container *ngIf=\"i > 0\">\n                    <span class=\"secondary-text\" \n                          [innerHTML]=\"highlightText(getValues(item, SearchItem)[key], searchKeyWord)\">\n                    </span>\n                    <span class=\"separator\" *ngIf=\"i < getKeys(getValues(item, SearchItem)).length - 1\"> | </span>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"noResult && searchKeyWord\" class=\"no-results\">\n      <div class=\"no-results-content\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n          <path d=\"m21 21-4.35-4.35\"></path>\n        </svg>\n        <p>{{ 'NO_RESULTS_FOUND' | nxtCustomTranslate : 'No results found for' }} \"{{searchKeyWord}}\"</p>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".search-wrapper{position:relative;width:100%}.suggestion-wrapper{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000001a;z-index:1000;max-height:300px;overflow:hidden}.nxt-suggestions-container{max-height:300px;overflow-y:auto;min-width:100%}.suggestion-item{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .2s ease;outline:none}.suggestion-item:hover,.suggestion-item:focus{background-color:#f5f5f5}.suggestion-item:last-child{border-bottom:none}.item-content{padding:5px}.item-details{display:flex;align-items:flex-start;gap:12px;text-align:left}.thumbnail-wrapper{flex-shrink:0}.thumbnail-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #e0e0e0}.item-text{flex:1;min-width:0}.item-name{font-size:14px;font-weight:500;color:#333;line-height:1.4;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word}.item-secondary{font-size:12px;color:#666;line-height:1.3;display:flex}.secondary-text{display:inline}.separator{color:#999;margin:0 3px}.no-results{padding:20px;text-align:center;color:#666}.no-results-content{display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column}.no-results-content svg{color:#d1d5db;margin-bottom:8px}.no-results-content p{color:#6b7280;margin:0;font-size:14px;font-weight:500}:host ::ng-deep .highlight{font-weight:700;display:inline}.nxt-suggestions-container::-webkit-scrollbar{width:6px}.nxt-suggestions-container::-webkit-scrollbar-track{background:#f1f1f1}.nxt-suggestions-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.nxt-suggestions-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.suggestion-wrapper,.nxt-suggestions-container{max-height:250px}.item-content{padding:10px 12px}.item-details{gap:8px}.thumbnail-wrapper img{width:32px;height:32px}.item-name{font-size:13px}.item-secondary{font-size:11px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "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", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtSearchBox, decorators: [{
             type: Component,
@@ -52546,8 +52464,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormsModule,
                         NxtInput,
                         NxtCustomTranslatePipe
-                    ], template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\" #searchWrapper>\n  <nxt-input \n    [type]=\"'list'\" \n    [mode]=\"mode\" \n    [from]=\"from\"\n    [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n    [labelFont]=\"question?.font\" \n    [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n    [labelColor]=\"question?.fontColor\"\n    [labelSize]=\"question?.fontSize\" \n    [inputValueSize]=\"question?.fontSize\" \n    [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" \n    [showLabel]=\"question?.style?.showLabel\" \n    inputBorder=\"none\" \n    svgHeight=\"20px\"\n    svgWidth=\"20px\" \n    [placeholder]=\"placeHolderText\" \n    [required]=\"question?.isOptional\" \n    inputBgColor=\"#FAFAFA\"\n    [inputId]=\"question?.trackingId\" \n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" \n    (inputValue)=\"getSourceDataLocal($event); inputValue($event.value, $event.question)\" \n    (onFocus)=\"onInputFocus()\"\n    (onBlur)=\"onInputBlur()\"\n    [showSuggestion]=\"showSuggestion\" \n    ariaOwns=\"selectList\" \n    ariaHasPopup=\"listbox\" \n    [isLoading]=\"isLoading\" \n    [question]=\"question\"\n    (removeValueEmit)=\"removeValueEmit()\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\" *ngIf=\"showSuggestion\">\n    <div *ngIf=\"finalResults().length > 0\" class=\"nxt-suggestions-container\">\n      <div *ngFor=\"let item of finalResults(); trackBy: trackByFn\" \n           (click)=\"clickItem(item)\" \n           class=\"suggestion-item\" \n           role=\"option\"\n           tabindex=\"0\"\n           (keydown.enter)=\"clickItem(item)\"\n           (keydown.space)=\"clickItem(item)\">\n        <div class=\"item-content\">\n          <div class=\"item-details\">\n            <div *ngIf=\"item.thumbnail\" class=\"thumbnail-wrapper\">\n              <img [src]=\"item.thumbnail\" [alt]=\"item.name + ' avatar'\" />\n            </div>\n            <div class=\"item-text\">\n              <!-- Primary text (first key) -->\n              <ng-container *ngIf=\"getKeys(getValues(item, SearchItem)).length > 0\">\n                <div class=\"item-name primary\" \n                     [innerHTML]=\"highlightText(getValues(item, SearchItem)[getKeys(getValues(item, SearchItem))[0]], searchKeyWord)\">\n                </div>\n              </ng-container>\n              \n              <!-- Secondary text (remaining keys) -->\n              <div class=\"item-secondary\" *ngIf=\"getKeys(getValues(item, SearchItem)).length > 1\">\n                <ng-container *ngFor=\"let key of getKeys(getValues(item, SearchItem)); let i = index\">\n                  <ng-container *ngIf=\"i > 0\">\n                    <span class=\"secondary-text\" \n                          [innerHTML]=\"highlightText(getValues(item, SearchItem)[key], searchKeyWord)\">\n                    </span>\n                    <span class=\"separator\" *ngIf=\"i < getKeys(getValues(item, SearchItem)).length - 1\"> | </span>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"noResult && searchKeyWord\" class=\"no-results\">\n      <div class=\"no-results-content\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n          <path d=\"m21 21-4.35-4.35\"></path>\n        </svg>\n        <p>{{ 'NO_RESULTS_FOUND' | nxtCustomTranslate : 'No results found for' }} \"{{searchKeyWord}}\"</p>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".search-wrapper{position:relative;width:100%}.suggestion-wrapper{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000001a;z-index:10;max-height:300px;overflow:hidden}.nxt-suggestions-container{max-height:300px;overflow-y:auto;min-width:100%}.suggestion-item{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .2s ease;outline:none}.suggestion-item:hover,.suggestion-item:focus{background-color:#f5f5f5}.suggestion-item:last-child{border-bottom:none}.item-content{padding:5px}.item-details{display:flex;align-items:flex-start;gap:12px;text-align:left}.thumbnail-wrapper{flex-shrink:0}.thumbnail-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #e0e0e0}.item-text{flex:1;min-width:0}.item-name{font-size:14px;font-weight:500;color:#333;line-height:1.4;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word}.item-secondary{font-size:12px;color:#666;line-height:1.3;display:flex}.secondary-text{display:inline}.separator{color:#999;margin:0 3px}.no-results{padding:20px;text-align:center;color:#666}.no-results-content{display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column}.no-results-content svg{color:#d1d5db;margin-bottom:8px}.no-results-content p{color:#6b7280;margin:0;font-size:14px;font-weight:500}:host ::ng-deep .highlight{font-weight:700;display:inline}.nxt-suggestions-container::-webkit-scrollbar{width:6px}.nxt-suggestions-container::-webkit-scrollbar-track{background:#f1f1f1}.nxt-suggestions-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.nxt-suggestions-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.suggestion-wrapper,.nxt-suggestions-container{max-height:250px}.item-content{padding:10px 12px}.item-details{gap:8px}.thumbnail-wrapper img{width:32px;height:32px}.item-name{font-size:13px}.item-secondary{font-size:11px}}\n"] }]
-        }], ctorParameters: () => [{ type: StorageService }, { type: ChangeService }, { type: DataService }, { type: I18nService }, { type: CountryService }, { type: i0.ElementRef }], propDecorators: { placeHolderText: [{
+                    ], template: "<!-- VD 12Jun24 - readonly change -->\n<div class=\"search-wrapper\" #searchWrapper>\n  <nxt-input \n    [type]=\"'list'\" \n    [mode]=\"mode\" \n    [from]=\"from\"\n    [value]=\"mode === 'edit' ? filterName : viewFilterName\"\n    [labelFont]=\"question?.font\" \n    [label]=\"question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''\" \n    [labelColor]=\"question?.fontColor\"\n    [labelSize]=\"question?.fontSize\" \n    [inputValueSize]=\"question?.fontSize\" \n    [labelWeight]=\"question?.fontWeight\"\n    [inputWeight]=\"question?.fontWeight\" \n    [showLabel]=\"question?.style?.showLabel\" \n    inputBorder=\"none\" \n    svgHeight=\"20px\"\n    svgWidth=\"20px\" \n    [placeholder]=\"placeHolderText\" \n    [required]=\"question?.isOptional\" \n    inputBgColor=\"#FAFAFA\"\n    [inputId]=\"question?.trackingId\" \n    [errorMessages]=\"{ required: 'This field is required' }\"\n    [inputIconLeftSrc]=\"question?.iconLeftSrc\" \n    (inputValue)=\"getSourceDataLocal($event); inputValue($event.value, $event.question)\" \n    (onFocus)=\"onInputFocus()\"\n    (onBlur)=\"onInputBlur()\"\n    [showSuggestion]=\"showSuggestion\" \n    ariaOwns=\"selectList\" \n    ariaHasPopup=\"listbox\" \n    [isLoading]=\"isLoading\" \n    [question]=\"question\"\n    (removeValueEmit)=\"removeValueEmit()\">\n  </nxt-input>\n\n  <div id=\"selectList\" class=\"suggestion-wrapper\" role=\"listbox\" *ngIf=\"showSuggestion\">\n    <div *ngIf=\"finalResults().length > 0\" class=\"nxt-suggestions-container\">\n      <div *ngFor=\"let item of finalResults(); trackBy: trackByFn\" \n           (click)=\"clickItem(item)\" \n           class=\"suggestion-item\" \n           role=\"option\"\n           tabindex=\"0\"\n           (keydown.enter)=\"clickItem(item)\"\n           (keydown.space)=\"clickItem(item)\">\n        <div class=\"item-content\">\n          <div class=\"item-details\">\n            <div *ngIf=\"item.thumbnail\" class=\"thumbnail-wrapper\">\n              <img [src]=\"item.thumbnail\" [alt]=\"item.name + ' avatar'\" />\n            </div>\n            <div class=\"item-text\">\n              <!-- Primary text (first key) -->\n              <ng-container *ngIf=\"getKeys(getValues(item, SearchItem)).length > 0\">\n                <div class=\"item-name primary\" \n                     [innerHTML]=\"highlightText(getValues(item, SearchItem)[getKeys(getValues(item, SearchItem))[0]], searchKeyWord)\">\n                </div>\n              </ng-container>\n              \n              <!-- Secondary text (remaining keys) -->\n              <div class=\"item-secondary\" *ngIf=\"getKeys(getValues(item, SearchItem)).length > 1\">\n                <ng-container *ngFor=\"let key of getKeys(getValues(item, SearchItem)); let i = index\">\n                  <ng-container *ngIf=\"i > 0\">\n                    <span class=\"secondary-text\" \n                          [innerHTML]=\"highlightText(getValues(item, SearchItem)[key], searchKeyWord)\">\n                    </span>\n                    <span class=\"separator\" *ngIf=\"i < getKeys(getValues(item, SearchItem)).length - 1\"> | </span>\n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"noResult && searchKeyWord\" class=\"no-results\">\n      <div class=\"no-results-content\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n          <path d=\"m21 21-4.35-4.35\"></path>\n        </svg>\n        <p>{{ 'NO_RESULTS_FOUND' | nxtCustomTranslate : 'No results found for' }} \"{{searchKeyWord}}\"</p>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".search-wrapper{position:relative;width:100%}.suggestion-wrapper{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-top:none;border-radius:0 0 4px 4px;box-shadow:0 2px 8px #0000001a;z-index:1000;max-height:300px;overflow:hidden}.nxt-suggestions-container{max-height:300px;overflow-y:auto;min-width:100%}.suggestion-item{cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .2s ease;outline:none}.suggestion-item:hover,.suggestion-item:focus{background-color:#f5f5f5}.suggestion-item:last-child{border-bottom:none}.item-content{padding:5px}.item-details{display:flex;align-items:flex-start;gap:12px;text-align:left}.thumbnail-wrapper{flex-shrink:0}.thumbnail-wrapper img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid #e0e0e0}.item-text{flex:1;min-width:0}.item-name{font-size:14px;font-weight:500;color:#333;line-height:1.4;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word}.item-secondary{font-size:12px;color:#666;line-height:1.3;display:flex}.secondary-text{display:inline}.separator{color:#999;margin:0 3px}.no-results{padding:20px;text-align:center;color:#666}.no-results-content{display:flex;align-items:center;justify-content:center;gap:8px;flex-direction:column}.no-results-content svg{color:#d1d5db;margin-bottom:8px}.no-results-content p{color:#6b7280;margin:0;font-size:14px;font-weight:500}:host ::ng-deep .highlight{font-weight:700;display:inline}.nxt-suggestions-container::-webkit-scrollbar{width:6px}.nxt-suggestions-container::-webkit-scrollbar-track{background:#f1f1f1}.nxt-suggestions-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.nxt-suggestions-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.suggestion-wrapper,.nxt-suggestions-container{max-height:250px}.item-content{padding:10px 12px}.item-details{gap:8px}.thumbnail-wrapper img{width:32px;height:32px}.item-name{font-size:13px}.item-secondary{font-size:11px}}\n"] }]
+        }], ctorParameters: () => [{ type: StorageService }, { type: ChangeService }, { type: DataService }, { type: CountryService }, { type: i0.ElementRef }], propDecorators: { placeHolderText: [{
                 type: Input
             }], question: [{
                 type: Input
@@ -52582,7 +52500,6 @@ var searchBox_component = /*#__PURE__*/Object.freeze({
 class CustomRadioComponent {
     changeService;
     dataService;
-    i18nService;
     options = [];
     question = {};
     apiMeta;
@@ -52605,10 +52522,9 @@ class CustomRadioComponent {
     isSaveHovered = false;
     isDiscardHovered = false;
     value;
-    constructor(changeService, dataService, i18nService) {
+    constructor(changeService, dataService) {
         this.changeService = changeService;
         this.dataService = dataService;
-        this.i18nService = i18nService;
         this.changeService.submitValidate$.subscribe((data) => {
             this.invalidFieldIds.push(data);
         });
@@ -52692,7 +52608,7 @@ class CustomRadioComponent {
         this.viewEdit = false; // SKS11JUN25 Exit view edit mode
         this.mode = 'view'; // Switch back to view mode
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRadioComponent, deps: [{ token: ChangeService }, { token: DataService }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRadioComponent, deps: [{ token: ChangeService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CustomRadioComponent, isStandalone: true, selector: "app-custom-radio", inputs: { options: "options", question: "question", apiMeta: "apiMeta", selectedValue: "selectedValue", progressBar: "progressBar", id: "id", readOnly: "readOnly", errorMessage: "errorMessage", error: "error", fromShengel: "fromShengel", referenceField: "referenceField", token: "token", mode: "mode" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP26MAR25  Mark as checked if it matches the selected value -->\n<div class=\" hover-wrapper custom-radio-container\">\n  <div\n    style=\"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-left: 5px; padding-right: 5px; background-color: #FAFAFA; border-radius: 5px;\">\n    @if(mode === 'edit'){\n    <div>\n      <div *ngFor=\"let option of options\"\n        [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\">\n\n        <input type=\"radio\" [id]=\"apiMeta ? option[labelField] ?? option.value : option.value\"\n          [checked]=\"(selectedValue ?? '') == option.value\" [name]=\"id\" [value]=\"selectedValue\"\n          (change)=\"radioChange($event)\" />\n        <label class=\"nxt-radio-label\" [for]=\"apiMeta ? option[labelField] ?? option.value : option.value\">\n          {{ apiMeta ? option[labelField] ?? option.value : option.value }}\n        </label>\n      </div>\n    </div>\n    }\n    <div *ngIf=\"viewEdit\" class=\"flex\" style=\"display: flex; margin-left: auto;\">\n      <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n          style=\"padding-right: 5px;\">\n          <svg *ngIf=\"!isSaveHovered\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n          </svg>\n\n          <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n              fill=\"#259566\" />\n            <path\n              d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n              fill=\"white\" />\n          </svg>\n        </div>\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\">\n          <svg *ngIf=\"!isDiscardHovered\" 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\n          <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\"\n            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n              fill=\"#FF3636\" />\n          </svg>\n        </div>\n    </div>\n  </div>\n  @if(mode !== 'edit') {\n  <div class=\"flex content-space-between\">\n    <div>{{selectedValue || '-'}}</div>\n    <div>\n      <svg *ngIf=\"!question.isReadOnly && !viewEdit \" class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\"\n        height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\" 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  </div>\n  }\n  <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">\n    {{ errorMessage ?? 'Invalid selection' }}\n  </span>\n</div>", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomRadioComponent, decorators: [{
@@ -52700,7 +52616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'app-custom-radio', standalone: true, imports: [
                         CommonModule,
                     ], template: "<!-- AP26MAR25  Mark as checked if it matches the selected value -->\n<div class=\" hover-wrapper custom-radio-container\">\n  <div\n    style=\"display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-left: 5px; padding-right: 5px; background-color: #FAFAFA; border-radius: 5px;\">\n    @if(mode === 'edit'){\n    <div>\n      <div *ngFor=\"let option of options\"\n        [class]=\"invalidFieldIds.includes(id) || error ? 'custom-radio-option invalid' : 'custom-radio-option'\">\n\n        <input type=\"radio\" [id]=\"apiMeta ? option[labelField] ?? option.value : option.value\"\n          [checked]=\"(selectedValue ?? '') == option.value\" [name]=\"id\" [value]=\"selectedValue\"\n          (change)=\"radioChange($event)\" />\n        <label class=\"nxt-radio-label\" [for]=\"apiMeta ? option[labelField] ?? option.value : option.value\">\n          {{ apiMeta ? option[labelField] ?? option.value : option.value }}\n        </label>\n      </div>\n    </div>\n    }\n    <div *ngIf=\"viewEdit\" class=\"flex\" style=\"display: flex; margin-left: auto;\">\n      <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n          style=\"padding-right: 5px;\">\n          <svg *ngIf=\"!isSaveHovered\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n          </svg>\n\n          <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\" fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n              fill=\"#259566\" />\n            <path\n              d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n              fill=\"white\" />\n          </svg>\n        </div>\n        <div *ngIf=\"viewEdit && originalValue !== value\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\">\n          <svg *ngIf=\"!isDiscardHovered\" 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\n          <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"16\" height=\"16\" viewBox=\"0 0 12 13\"\n            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path\n              d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n              fill=\"#FF3636\" />\n          </svg>\n        </div>\n    </div>\n  </div>\n  @if(mode !== 'edit') {\n  <div class=\"flex content-space-between\">\n    <div>{{selectedValue || '-'}}</div>\n    <div>\n      <svg *ngIf=\"!question.isReadOnly && !viewEdit \" class=\"edit-icon\" (click)=\"viewEditClick(question)\" width=\"13\"\n        height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\" 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  </div>\n  }\n  <span *ngIf=\"error || invalidFieldIds.includes(id)\" class=\"error-msg\">\n    {{ errorMessage ?? 'Invalid selection' }}\n  </span>\n</div>", styles: [".custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.custom-radio-option.invalid label{color:red}.error-msg{color:red;font-size:12px;margin-top:5px}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: ChangeService }, { type: DataService }, { type: I18nService }], propDecorators: { options: [{
+        }], ctorParameters: () => [{ type: ChangeService }, { type: DataService }], propDecorators: { options: [{
                 type: Input
             }], question: [{
                 type: Input
@@ -52830,7 +52746,6 @@ class NxtFileUploadComponent {
     SharedService;
     dataService;
     sanitizer;
-    i18nService;
     selectedFileData = new EventEmitter();
     deletedFileData = new EventEmitter();
     allFiles;
@@ -52858,11 +52773,10 @@ class NxtFileUploadComponent {
     isSaveHovered = false;
     isDiscardHovered = false;
     isLoading = false;
-    constructor(SharedService, dataService, sanitizer, i18nService) {
+    constructor(SharedService, dataService, sanitizer) {
         this.SharedService = SharedService;
         this.dataService = dataService;
         this.sanitizer = sanitizer;
-        this.i18nService = i18nService;
     }
     //RS 09JAN2025
     ngOnInit() {
@@ -53083,7 +52997,7 @@ class NxtFileUploadComponent {
         this.viewEdit = false; // SKS13JUN25 Exit view edit mode
         this.mode = 'view'; // SKS13JUN25 Switch back to view mode
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtFileUploadComponent, deps: [{ token: SharedService }, { token: DataService }, { token: i1$1.DomSanitizer }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtFileUploadComponent, deps: [{ token: SharedService }, { token: DataService }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NxtFileUploadComponent, isStandalone: true, selector: "app-file-upload", inputs: { allFiles: "allFiles", limitFileUploading: "limitFileUploading", mode: "mode", isShowNoFileIcon: "isShowNoFileIcon", question: "question", error: "error", from: "from" }, outputs: { selectedFileData: "selectedFileData", deletedFileData: "deletedFileData" }, usesOnChanges: true, ngImport: i0, template: "<!-- SKS11JUN25 file-upload.component.html -->\n<div class=\"flex hover-wrapper\" style=\"align-items: center; gap: 10px;\">\n  <div class=\"flex file-inner-div\">\n    <svg *ngIf=\"from !== 'nxtTable'\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n      <rect width=\"24\" height=\"24\" fill=\"url(#pattern0_616_35125)\" />\n      <defs>\n        <pattern id=\"pattern0_616_35125\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n          <use xlink:href=\"#image0_616_35125\" transform=\"scale(0.00195312)\" />\n        </pattern>\n        <image id=\"image0_616_35125\" width=\"512\" height=\"512\" preserveAspectRatio=\"none\"\n          xlink:href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAIABJREFUeJzt3XfYH1WZ//F3SE/oCaETAgoiJXTpggiKgitR1JUVXcu6+LOg/izsWqKra8e66qLigooIAipWykaUJiAgRUVqILSEhCSU9GT/ON9HHpKnfOvcZ2ber+u6r4AXV+aTmcece86cOTMCVcU4YBqwfaO2ATYDJgOTGr+OBzZu/PdjgIlFh5R6ZBWwuPHPTwLLgceBR4B5wKONXx8E7gHuAuYAawpPKmViRHQAtWwMsCuwe6OmN/59q8hQUgktJTUDdwA3Azc0anZkKKkoNgD5mwwcBBzcqH2BsaGJpGpbQGoErgJ+C1wDLIkMJPWCDUB+RpEG/GOAF5Pu8L1OUpylwB+AWcAlpIZgdWgiqQscWPIwHngJ8CrgaJ5+Ti8pP48APwN+AlwGLIuNI7XHBiDOGNId/quBlwHrx8aR1IbHgZ8DZ5FmB1bFxpGaZwNQvGcBbwbeAGweG0VSFz0I/Bj4DmlRoZQ1G4BijASOB04GjsDzLlXdFcCXgQtxVkCZciDqrXGk5/r/BuwcnEVS8e4FvgmcDjwWG0V6JhuA3tgEeA/wNmDT4CyS4i0mNQGfJW1IJIWzAeiu9YH/B3wQV/JLWteTpDUCnwTmBmdRzdkAdMc44J3A+0nb7krSUBYBX2zU4mH+W6knbAA6dxzwJWCH6CCSSmc+8B/AV3FzIRXMBqB900kD/+HBOSSV3zXAO4Dro4OoPtaLDlBC40kLea7HwV9SdxxA2m74dNIiYqnnnAFozaHAt/CVPkm98wjwr6SthqWecQagOeuTOvPLcfCX1FubkzYQ+i6+TaQecgZgePsDPyBt4StJRZoDvJH0nQGpq0ZGB8jYeqRX+34IbBacRVI9bQj8E2nt0SxgTWwcVYkzAAObApxD2rdfknJwCXAi7iSoLrEBWNf+pC96bRsdRJLWMof0CfGrooOo/FwE+EwnAb/FwV9SnrYhPQp4XXQQlZ9rAJKRpE19Pg2MDs4iSUMZCbycNIN7eXAWlZgNAEwEfgS8PjqIJDVpBGkjsu2BXwKrIsOonOq+BmAL4GfAftFBJKlNl5FmBJ6IDqJyqXMDMBW4FN/vl1R+VwIvwS8LqgV1bQCmkbrmadFBJKlLrgdeBCyIDqJyqGMDsAvpzn+r6CCS1GU3AEdhE6Am1K0B2I30Cs3k6CCS1CPXAS/ANQEaRp32AXgWcDEO/pKqbT/gp8DY6CDKW11eA9yWdOfvBj+S6mAasCNwQXQQ5asODcAWwO+AHaKDSFKBdgfGkdY8SeuoegMwEfgN6dm/JNXNIcBc0hsC0jNUeRHgeqSP+hwfHUSSAq0AjgR+Hx1EeanyIsAv4uAvSaOBc/HVZ62lqg3AW4F3RoeQpExsQZoRHRMdRPmo4hqA/Und7qjoIJKUkW2BDYFfRwdRHqrWAEwhbfG7aXQQScrQAcD9wI3RQRSvSosARwKXAEdEB5GkjC0BDgX+GB1Esaq0BuBUHPwlaTjjgQtJM6aqsarMAOwDXE1a7SpJGt6VpG8GLI8OohhVWAMwkbTHv92sJDVvO2AT4FfRQRSjCg3AfwFHR4eQpBLaH7gPuCk6iIpX9kcAhwP/S/n/HJIUZRlwGHBtdBAVq8wD53jgZtJnfiVJ7XsI2Bd4MDqIilPmtwA+joO/JHXDlqSdAsdGB1FxyroGYDpwBuVuYCQpJ9sCk4FfRAdRMcraAJwD7BAdQpIqZl/S4wA3CaqBMq4BeCVwXnQISaooPx9cE2VrAMYCt+Kzf0nqpYdJswEPRAdR75TtGfq7cPCXpF7r+3ywiwIrrExrANYHfkTa+U+S1FvbkHYL/El0EPVGmRqAU4GXRoeQpBqZDswFro8Oou4ryxqAjYG7SftWS5KKswI4Crg8Ooi6qyxrAN6Lg78kRRhNevy6TXQQdVcZZgAmkD5WMSk6iCTV2I3AwcCS6CDqjjLMALwZB39JirYX8N/RIdQ9uS8CHAl8H9g0OogkienAAvxyYCXkPgNwPLBjdAhJ0t99gfQpdpVc7g3AydEBJEnPMJq0SdC06CDqTM6LAHcE7iDvjJJUVzeRFgU+FR1E7cl5BuBfcPCXpFztCZweHULty3UR4Gjgf0jb/0qS8rQH8DhwdXQQtS7XGYBjSB+jkCTl7TOkzwerZHJtAF4THUCS1JRRwLn4xlbp5PiMfQLwCE7/S1KZ3AwcBDwZHUTNyXEG4CU4+EtS2ewBnEWeN5YaQI6LAD8K7BodQpLUsl1IrwVeGR1Ew8utUxsFzCN9/leSVD6rgWOBX0UH0dByewRwEA7+klRm6wE/AJ4VHURDy60BOCY6gCSpY5sAPwM2jA6iwdkASJJ6YRfgTPJ71KyGnBYBTgY+jz8sklQVzwGWA7+PDqJ15TQDcDAO/pJUNf9BWhSozOTWAEiSqmU94GzSIwFlxAZAktRrGwAXAhtFB9HTcplyHwssavwqSaqmnwAzgDXRQZTPDMBzcfCXpKp7OfDh6BBKcmkA9ogOIEkqxEzgFdEhZAMgSSrWCOC7+M2XcDYAkqSibQBcgFu/h8qlAXhudABJUqF2In0+OJdxqHZy2AlwPPAp8nkjQZJUjJ1JDcCs6CB1lEPntT0O/pJUVx8CTogOUUe5NACSpHoaAZwB7BYdpG5yaACmRQeQJIVan/T54EnRQeokhwZgm+gAkqRw04Dvkce4VAs5nOjNogNIkrJwDPCJ6BB1kUMD4JSPJKnPB4FXR4eogxwagMnRASRJ2ejbKXDv6CBVZwMgScrNeOB8HB96KocGYIPoAJKk7GwP/IA8NqyrpBwaAD8DLEkayNGknWLVAzk0AGOiA0iSsvU+4PXRIaoohy14nyI975EkaSBLgEOBP0YHqZIcGoCV+IxHkjS02cB+wLzoIFWRwyMAB39J0nCmAucAo6KDVEUODYAkSc14AfDZ6BBVkcMjgDXRASRJpfIm0hcE1QEbAElS2SwFDgOuiw5SZjYAkqQyuh/YF5gbHaSsXAMgSSqjbYELcC+ZttkASJLK6mDgC9EhyspHAJKksnsL8O3oEGVjAyBJKrtlpEWB10YHKRMbAElSFTxEWhT4YHSQsnANgCSpCrYEfoxfmG2aDYAkqSoOBL4UHaIsfAQgSaqatwKnR4fInQ2AJKlqVgBHAr+PDpIzGwBJUhU9TFoU+EB0kFy5BkCSVEVb4KLAIdkASJKq6gBcCzAoGwBJUpWdBJwcHSJHrgGQJFXdCuAo4PLoIDmxAZAk1cEjwH6kzwgLHwFIkuphc+CnwPjoILmwAZAk1cVewH9Hh8iFDYAkqU5eB7wjOkQOXAMgSaqblcDRwKzoIJFsACRJdTSftCjwnuggUXwEIEmqo0nABcCE6CBRbAAkSXW1JzXeKdAGQJJUZycC74kOEcE1AJKkulsFHAv8OjpIkWwAJEmCBcD+wF3RQYriIwBJkmBT0qLAidFBimIDIElSsgdwFnnMjvecDYAkSU+bAbwvOkQRcuhyXAMgScrJauA44JfRQXrJBkCSpHU9RloUeGd0kF7xEYAkSevaBPgZsGF0kF6xAZAkaWC7AGeSx2x519kASJI0uJcDp0aH6IUcuhrXAEiScrYaeBFwaXSQbrIBkCRpeA8Au5MWB1aCjwAkSRre1sBp0SG6yRkASZKaNwO4MDpEN9gASJLUvLmkRwFzo4N0ykcAkiQ1bwrw5egQ3eAMgCRJrXsVcF50iE7YAEiS1Lq5wE7Aougg7fIRgCRJrZsCfDQ6RCecAZAkqT0rgb2AW6ODtMMZAEmS2jMK+GJ0iHbZAEiS1L4XAsdFh2iHjwAkSerMXcCuwLLoIK1wBkCSpM7sCJwSHaJVzgBIktS5xcA0YEF0kGY5AyBJUuc2BN4VHaIVzgBIktQdi0izAKX4ZLAzAJIkdcdGwDuiQzTLGQBJkrpnIWkWYGF0kOE4AyBJUvdsDJwcHaIZzgBIktRd80mzAI9HBxmKMwCSJHXXJOAt0SGG4wyAJEndN5u0QdCq6CCDsQGQFGE5cC9pC9U7gYeBB4FHSN9Zfwp4koGnUCcA40jPWicBmzVqa9K06w6N2qiXfwCpCS8DLooOMRgbAEm9thi4BrixUTeRBv1e3xltB+zeqH2Ag4CtenxMqb9LgKOjQwzGBkBStz0BXAr8L/B74BbymQadChwMHEn6i3mb2DiquDXATqSGNzs2AJK6YQ5wPvBz0qBflq+i7QIcC8wAnkcefyeqWj4JfCg6xEBy+GG3AZDKaS5wDnAucBXl///yNsArgJOAvYOzqDrmANuTzyzY39kASGrFauBi4NukxU3LY+P0zO7A64E3kBYaSp04Bvh1dIi12QBIasYTwNnAacDtwVmKNBZ4NfBuYM/gLCqv75FmlrJiAyBpKI8Anwe+RfrSWZ0dCfwb8ILoICqdRcAWwNLoIP25E6CkgcwF/j/pffrP4+APcBmpCTgQ+GVwFpXLRsCLokOszQZAUn9PAh8lDfxfIG3Io2e6Bngp8Hzg6uAsKo8TogOszUcAkiAt7vsf4MOkHfnUvBmkZmn74BzK2wJgc2BldJA+zgBIupm0Oc6bcPBvxwXAc4GPkdkzXmVlU9Ljo2zYAEj19STpOf8+pGlttW8JMBPYDZgVG0UZe2l0gP58BCDV01Wk99yz3KK05EYAbwU+C2wQnEV5uRmYHh2ijw2AVC/LSVPVnyHDnckqZirwfeCQ6CDKxhpgCvBodBDwEYBUJ/eSBqP/xMG/CLOBI4CP4/lWMoL09kgWbACkevgF6Vn/ddFBamYl6bXKI4GHg7MoD4dHB+hjAyBV2xrgI8BxpNeQFONyYF/gD9FBFO7Q6AB9XAMgVdcq0v7jZ0cH0d+NBf6L9Mql6mklaWfA8E22nAGQqusUHPxzswx4M3Aq3vzU1Sgy+bCUDYBUTecCX4sOoUF9GjiR1BCofvaLDgA2AFIVLQLeGR1Cw/oh6TvxT0QHUeGy2AvABkCqnq+SPuOr/M0ivSo4PzqICrVLdABwEaBUNStJX/K7PzqIWrI38BtgcnQQFWIRsHF0CGcApGr5KQ7+ZXQD6Xvxi6KDqBAbAVtHh7ABkKrlp9EB1LYbgBfjmoC62CE6gA2AVC1XRQdQR64Bjse3A+pganQAGwCpOh4B7ooOoY5dSvpSo+ujqm3b6AA2AFJ13BEdQF3zI9JHhFRd20UHsAGQqsMFZNXyMeAH0SHUM1OiA9gASNWxMDqAumoNadvgG6KDqCc2jQ5gAyBVh/9/rp6lwKuwuasiGwBJXRO+qEg9cRcuCqyi8AbAnQCl6riPDF4tasMIUvOyU6OmkHZJ66vRwJON/3YhsASYDcwhbXp0JzCv2Mghvgq8PTqEumY+wTs/2gBI1bEK2AR4PDrIMCYDhzXqUNK+6OM7/D3vA64D/gBc3ahVHf6euZkA/BF4TnQQdcXjwIaRAWwApGo5FvhFdIgBPJf0LHsGsBu9/7tnPvBL4GekPfZzb4qatS9ps6fR0UHUsWXAuOgQ0dZYltW1Oot8bA78O3AzsefkCeBbwF69/eMW5hPE/5xZndfqtS9s0ZwBkKrlKWAaMDcww+7AKcCJwNjAHAO5GvgycB4Z/AXcpvGkpupZ0UHUsdAx2LcApGqZQLrrjrA38GvgT8AbyW/wBzgQOIf0bv1Lg7O0awnwtugQUjdET8NYVtVqJfA8irMd6dHDqi7/OYqo3wP7dP+UFOIc4s+f1VmF8hGAVE1zSE3Agz08xljgQ8B76XwVf6SVwGdJe++X6St82wN/wYVkZeYjAEldtw0wi97tCzAduJbUAJR58AcYBfwb6RW7/YKztOJe4CvRIVRezgBI1TYXOIn0Klw3jALeD3wUGNOl3zMnK4B3Ad+IDtKkjUgbIYVuKKO2OQMgqWemAL8Cvgfs0OHvNZ30DvonqebgD+n9+q8D36Qc79ovAj4fHULl5AyAVB+rSc3A14BLSc++hzOCtFvf24ATqNdNw+9IGxfNjw4yjPWBe3AWoIxCx2AbAKmeniRtnXsF6WMzi0l3k5DWD0wl7cv/AmDLiICZuAl4Ifk3AR8EPhUdQi2zAYgOIElD+BOpCXg0OsgQNiB9GGmj6CBqiWsAJClj04HLyHuK/XHgO9EhVC7OAEhSc64jPRJ5IjrIIKaS3ggYFR1ETXMGQJJKYD/SNwRyfTtgNunrh1JTbAAkqXkvBs4k3787vx0dQOXhIwBJat2ngVOjQwxgJOmVwG2jg6gpPgKQpJL5APAP0SEGsIo0QyENyxkASWrPo8BepA8v5WQn4PboEGqKMwCSVEKTgbPJb9X930h7F0hDsgGQpPYdSvqSYG7Oiw6g/PkIQJI6sxTYjbSlci58DFAObgUcHUAq2ELgDtJU7SLSLm6LSPvzLwM2Jn3gZSJpi9epwLOB7XDWLlc/B46LDrGWv5F+bpSv0DE4t2dXUtU8Tvqq3CzgWtJd2dw2f6+xpL/QdyVNPR8OPJc8Gvm6O7ZRP48O0s+vsQHQEHL4i8MZAFXNncAPSH8BX09zn91t1xTg+cDxpNfSJvTwWBraXaSGbHl0kIaXkldDonX5CCA6gNQFC4FzgbOAq4j5uV6f1AicSPp63ciADHX3RuC70SEaJgILgDHRQTQoG4DoAFIH5gLfAE4DFgdn6W8q8B7gzTgrUKTbSbMAq6ODNFwNHBAdQoNyHwCphB4BPghsD8wkr8Ef0odh3kVqBD5GuhNU7+0MvDw6RD9XRAdQvmwApNYsBz5BGvg/AywJTTO8R0kNyo7A10hbxaq3PhgdoJ8rowMoXz4CkJp3BfBW4M/RQTowndQIHBIdpOL2AW6IDgFsBTwQHUKD8hGAlLmlwMnAYZR78Ie0RexhwBtIew+oN06MDtDwIO2/dqqKswGQhnY/6TW7b1Kd2ao1pC/GTSctElP3/SP5vIXhdwE0IBsAaXCXkL72dm10kB6ZTdpM6ItUp7nJxZakc5sDGwANyAZAGthXgGOA+dFBemw56XXB40lbEat7TogO0PDX6ADKkw2AtK7Pk16hq9OK+Z8CRwDzooNUyBHRARpy+kiRMmIDID3TZ4H3RYcIch1pgeB90UEqYidg6+gQpK2ppXXYAEhP+zjwgegQwf4KHATcFh2kIg6PDkB6DXBpdAjlxwZASj4GfDQ6RCYeAI4C7okOUgGHRwcgLfB8MDqE8mMDIKWd8mYGZ8jNQ6Qm4JHoICW3R3SAhoejAyg/NgCqu5mku3+t6y7SN+6fiA5SYjtHB2h4KDqA8mMDoDr7GA7+w7keeB3uE9CujYAp0SFwN0ANwAZAdTUTp/2b9RPS9wPUnmdHBwAejw6g/NgAqI6882/d+4CbokOU1A7RAcjvc9XKgA2A6uZjeOffjmXAa3C3wHZsFB0AGwANwAZAdTITB/9O3E7aK0GtWT86AKmBk57BBkB1MROn/bvhS6RGQM3bIDoALuLUAGwAVAczcfDvluXAO6JDlEwODcDq6ADKjw2Aqs4Ff913CXBRdAi1xAZA67ABUJXNxGf+vfJhnFZuVg4L8MZGB1B+bABUVTPxzr+X/gRcFh2iJHLYSXF8dADlxwZAVTQTB/8ifDY6QEnksAnPuOgAyo8NgKrGZ/7FuQS4MTpECSyKDgBMiA6g/NgAqEpm4jP/op0RHaAE7ooOAEyODqD82ACoKmbinX+EHwEro0Nk7m/RAbAB0ABGRQeQuqDM0/6TgQOB5wHTSc9q1yft3HZHo64CrgZWBWUcyjzgUuDF0UEytQCYHx0CGwBlao1ldVAzKZ/1gGOAC4EVNPfnvB/4IHk+yz2J+J+DXOvqDs5rN/2Z+HNhrVu1F30BrPLWTMrnANIrdO3+me8Hjio89dAmkzaaif55yLFy+IzyCNJHnKLPhbVu1V70BbDKWTMpl9HAV0nT+J3+2VcB7yw2/rBuJv5nIsd6RScntUs2I/48WANX7UVfAKt8NZNyGQ2cT/fPw1uL/EMM4yvE/1zkVquASZ2c1C7Zj/hzYQ1coXwLQGXzMcrVAIwGzgFm9OD3/hrwkh78vu24PDpAhm4mjwWAO0UHUJ5sAFQmDv7PNAo4D9i7R79/K3JZ7JaTS6IDNOwaHUB5sgFQWTj4D2wCcC6wYY+PM5wHyeOjNzk5OzpAgw2ABmQDoDJw8B/ajuSxD0IOG97k4hbgpugQDbtFB1CebACUOwf/5rwdmFbwMdd2e/Dxc/K96AANk4j/uVCmbACUMwf/5o0C3htw3P7uCD5+LlYCP4gO0bAfaR8AaR02AMqVg3/r/hEYG3j8RwOPnZMfktZE5GD/6ADKlw2AcuTg355NgYMDj78w8Ni5WAV8MjpEPwdFB1C+bACUGwf/zhwaeGwbgPRaZi5rIcYAh0SHUL5sAJQTB//O7RJ47EWBx87BauAT0SH6eR4wMTqE8mUDoFw4+HfH5oHHXhl47Bz8N3BbdIh+XhAdQHmzAVAOHPy7Z3zgsccEHjvaQ8Cp0SHWkss20cqUDYCiOfh31xOBxx4XeOxo7yKvRyBbkV4BlAZlA6BIDv7dNyfw2JGvIEb6OWnxX06Oxff/NQwbAEVx8O+NWwOPXccFZ/cDb4oOMYDjowMofzYAivA5HPx75beBx94m8NgRlgGvBOZGB1nLFOCF0SGUv1HRAVQ7ZwAfiA7RgtHAjyjHHdVs4I+Bx98u8NgR3g5cGx1iAP+If7erCc4AqEjfA94CrIkO0qS+O/8yDP4A3yH23NZpBuAbwLejQwzixOgAUrPWWLWoS0kDalmMBs4n/rw1WwuBTXpyJpp3PfHnoYg6k3xvnvYg/vxYzVcop4lUhL8AJwArooM0qUzT/n0+AjwWePyRwHMCj1+UH5MW/a2ODjKIk6MDSK2I7sCs3tbDwFTKo2x3/muAWaQBONJ04s9Dr+s88r5p2gBYTPx5spqvULlOY6kaVpDu/GdHB2lSmVb797kPeC3pK3SR9g0+fq9dQDrPOW93/HpSEyCVRnQHZvWuTqE8ynjnP4/Yj//0903iz0ev6nzyX78yCrib+HNltVa1F30BrN7UDymPsg7+e/TiZLTpVuLPSS+qDIM/pFf/os+V1XrVXvQFsLpfd1KeqUgH/85NI/6c9KLKMviPAG4i/nxZrVco1wCo21YCrwMejw7ShL7V/mV65j8POBK4OTpIP8dFB+iBC4DXUI43V15BWoQplU50B2Z1t2ZSDqNJf8lHn69Wai553fn3+Q3x56abVZY7f0hvf9xG/Dmz2qvai74AVvfqOvJ+TaqP0/7dsxGwlPjz060q0+APcBLx58xqv2ov+gJY3akVwN7kzzv/7no78eenW1W2wX88cC/x581qv2ov+gJY3alPr31hM+Tg3303En+OulFlG/wBPk78ebM6q9qLvgBW53UXMGHtC5sZp/277wDiz1E3qoyD/zTgKeLPndVZ1V70BbA6r9z3zHfw740ziD9PnVYZB3+Ai4g/d1bnVXvRF8DqrGate0mz4rR/b2wHLCP+XHVSZR38X0v8ubO6U7UXfQGs9msVsM+6lzQbDv69czrx56qTKuvgPxl4hPjzZ3Wnai/6Aljt15kDXM9cOO3fO9sDy4k/X+1WWQd/gHOJP39W96r2oi+A1V6tAJ41wPXMgYN/b32b+PPVbpV58H8T8efP6m7VXvQFsNqrMwa6mBlw2r+39iNt9xx9ztqpMg/+zwIWE38Ore5W7UVfAKv1WgHsONDFDFbGO/8yDf6jKO97/2Ue/CdQ3vNuDV21F30BrNbrnAGvZKyRwI+JPzetVJkGf4D3En/O2qkyD/4A3yf+HFq9qdqLvgBW6/W8Aa9krM8Tf15aqbIN/tOAJ4g/b61W2Qf/dxN/Dq3eVe1FXwCrtbpy4MsY6p+JPy+tVNkG/zHANcSft1ar7IP/DNLjtujzaPWuai/6Alit1WsGvoxhDqVcG9KUbfAH+BLx563VqsLgX+ZXLa3mqvaiL4DVfD0KjB34MobYnHJtilLGwX8GsJr4c9dKOfhbZanai74AVvP1pUGuYZSfEH9Omq0yDv57AAuJP3etlIO/VaaqvegLYDVf0we5hhFOIv58NFtzgd17cxp6Zg/S5kTR566VcvC3yla1F30BrObqT4NdwABbAfOJPyfNlIN/MeXgb5WxQq0XHUCl8ePoAP18Gdg0OkQT5gEvBG6JDtKCPYDLSB+dKYsLSItTV0QHadMM0t4aZW5gpLZEd2BWc7XLYBewYPtTjkVp3vkXU975W2Wu2ou+ANbwddugV694s4g/H8NVWRf8OfgXy8Hfqr3oC2ANX58b9OoV66XEn4vhyjv/YsrB36pC1V70BbCGrxcOevWKdR3x52Ko8s6/mHLwt6pStRd9Aayh6ylg/KBXrzgHEH8uhirv/IspB3+rShXKtwA0nN8DS6JDACdHBxiCq/2L4Wp/qWKiOzBr6PrI4JeuMJNJTUj0uRiovPMvprzzt6pYoZwB0HCujg4AvB4YFx1iAN75F8M7f6miojswa/BaBWw0+KUrzFXEn4u1yzv/Yso7f6vKVXvRF8AavP48xHUryuakRiT6XPQvB/9iysHfqnqF8hGAhpLD1PZx5PVzOg84kjzOTbOc9i+e0/7KXk5/sSo/OewAeFx0gH4c/Ivh4C8VwAZAQ7k1+PgjgEOCM/Qp6+B/KQ7+RXLwV2mMig6grP0t+Pg7kMdX/8o6+HvnXywHf5WKMwAayuzg4+8XfPw+b8LBv9cc/KWC2QBoMPOBx4Mz7BN8fIBzgYuiQ7TAwb94Dv4qJRsADea+6ADArsHHXwKcEpyhFT7zL56Dv0rLNQAazMPRAYBtg49/HvBQcIZmeedfPAd/lZozABrM/OgAwNbBxz89+PjNcvAvnoO/Ss8GQIN5LPj4E4BNAo8/G7gy8PjNctq/eA7+qgQbAA1mQfDxtww+fg4fQRpO3+C/WXSQFjj4S5lwDYAGszT4+GODj39N8PGH47R/8Rz8VSnOAGgwy4KPH/2zeWfw8Yd5M6h2AAAQ2UlEQVTitH/xHPxVOc4AaDDLg48f/bP5ZPDxB+Odf/Ec/FVJ0XdZytfK4ONH/2wuCT7+QLzzL56Dvyor+i5L+Yr+Cy96AN4w+Phr886/eA7+qrTouyzlK3oR3qPBx98p+Pj9OfgXz8FflWcDoMGMCT7+AmB14PF3Djx2f077F8/BX7VgA6DBTAg+/ipiNyM6IvDYfXzPv3gO/qoNGwANZlJ0AGL34d+NNABHcfAvnoO/asUGQIPZNDoAcFvw8d8TdFwH/+I5+Kt2bAA0mBxmAG4NPv7rgH0KPubuOPgXzcFftWQDoMFE78UPcEvw8dcDvgesX9Dxdiet9nfwL46Dv2rLBkCDmRodgPgGAGAX0iDX69ciHfyL5+AvBVtjZVs5vHp2P/HnYQ3we3p3PvYA5mbwZ2ylzqfcA+cM0nbX0efRqneFcgZAQ5kaHQC4JDpAwyHAFcD2Xf59DwN+i3f+RfLOX8IGQEN7TnQA4OLoAP3sDFwHHNOF32sE8C5Sg7NJF36/ojj4S+qa6CkYa/D61BDXrSibkTYFij4X/Ws1aXHgNm3+mfYiPVKI/nO0Wk77W1Z3q/aiL4A1eF00xHUr0m+JPxcD1TLgDNI0/nCzaeOA44FfkBqI6OytloO/ZXW/Qo2IDkAGJ0GDuo881gG8AfhudIhhPAZcCfyFtKBvMWlqf2vSroIHAOPD0nXGaX+pN0LHYBsADWcrYrfkBZgIPExx7+PraQ7+Uu+EjsEuAtRwDowOADxJmoJWsRz8pQqzAdBwcmgAAL4RHaBmHPylirMB0HAOiQ7Q8AfSHvnqPQd/qQZcA6DhrAKmAAuigwCHA7OiQ1Scg79UHNcAKGsjgSOiQzT8lvT+vHrDwV+qERsANeNF0QH6+RDOGvWCg79UMzYAasZLyOdn5XfA96NDVIyDv1RDrgFQsw4hbXSTg82BvwIbRwepAAd/KY5rAFQKJ0QH6OcR4MPRISrAwV+qMWcA1Kw5pG2BV0cHaRhJei3w8OAcZeXgL8VzBkClsA35vA0A6fXE15C2CFZrHPwl2QCoJW+MDrCWR4DXkpoBNcfBXxJgA6DWzCB94S4ns4BPRYcoCQd/SX9nA6BWjAP+KTrEAD4KnB0dInMO/pKewUWAatU9wLPJb9p9NPBT4JjoIBly8Jfy5CJAlco04LjoEANYAbwSuCo6SGYc/CUNyAZA7Xh3dIBBPAW8DLg2OkgmHPwlDcoGQO04DDgoOsQg5gNHAr+JDhLsfBz8JQ3BBkDtmhkdYAhPAMcCZ0QHCfIV4NU4+EvK3BqrtHXIANczJyOAj5MWLEafqyJqKfD6rpy5ODOA5cSfS8sqokL5FoA6MQt4QXSIJhwFfI/0EaGqepg0eF4dHaQD3vmrbnwLQKV1BHm+EbC2S4A9gIujg/TIj0l/Pgd/SaUSPQVjdVa3U56/tEcCbwMeI/68daMeJS30Kzun/a26Vu1FXwCr8zplnauat82BM0lfNow+d+3UauCHwBbdPjEBHPytOlftRV8Aq/N6DNhy7QtbAocClxN//lqpS4B9enEyAjj4W3Wv2ou+AFZ36ry1L2yJHEraNyD6HA5VV5EWM1aFg79lKfwCWN2rl1Fu+5H2DlhM/LlcQ9rZ8DtU546/j4O/ZaUK5WuA6qb7SavRF0YH6dBE0iD1BuD5pMWDRVkFXAlcCJwFLCjw2EVwtb/0tNAx2AZA3XY2cGJ0iC7ahLS18NGNmtqDYzwMXAFcBPyCtJ1xFTn4S89kAxAdQF13IqkRqKKpwO7Abo1fdyWtxp/M8DMFDwMPAnOA24DrgOtJMydV5+AvrcsGIDqAum4hsCcwOzpIwSY3amLj3x9r/LoCeIT03LuOHPylgdkARAdQT9xE+mLgkuggCuXgLw3OrYBVSXsCX44OoVAO/lLGbADUS28B3hQdQiEc/KXM+QhAvbYceDHpy4GqBwd/qTmuAYgOoJ6bT1oP8LfoIOo5B3+pea4BUOVNAn4FTIkOop5y8JdKxAZARdkB+CmwQXQQ9YSDv1QyNgAq0gGkmYCJw/2HKhUHf6mEbABUtIOBC4Cx0UHUFQ7+UknZACjC0cCPsAkou1fh4C+Vlm8BKNIs0ieEn4gOopb9E/BdYFR0EKnEfAtAtXUE8Etgw+ggasnJwJk4+EulZgOgaIeSZgK2jA6iYY0APg58Hf/ukErPRwDKxYPAscCN0UE0oDHAd0hT/5K6w50AowMoG4uBE4CLo4PoGSaR3tw4LDqIVDGuAZAaNiStCZiJP5u52BO4Fgd/qXKcAVCuLgJOAhZGB6mx1wHfBCZEB5EqyhkAaQDHAdcAe0cHqaGJwLeBs3DwlyrLBkA52xn4A+mRwMjYKLWxH3AD8KboIJJ6y0cAKovLgTcA98bGqKxRwAeBj+DOflJRfAsgOoBK4ynSe+ifB1YFZ6mSvYDTgX2jg0g1YwMQHUClcz3wL7hnQKc2AP4DeDs+YpEiuAhQatG+pCbgLGCL4CxltB7pDYvbgXfh4C/VkjMAKrvFwKeALwFLg7OUwRHAF0jT/pJi+QggOoAqYS5wGvAVYElwlhwdBJxK2m5ZUh5sAKIDqFIeAD5N+lTtk8FZcvB84N+Bo6KDSFqHDUB0AFXSYuB/SG8M3B8bpXCjgZcD7wEOCM4iaXA2ANEBVGkrgAuBM4BLgNWxcXpqB+CfG7V1cBZJw7MBiA6g2riP9GjgHOCvwVm6ZSPgZaRNko4gj/9PS2qODUB0ANXSrcCPSZ+5vSU4S6smkRbzvZL0bH9sbBxJbbIBiA6g2psDXAz8BpgFzIuNs44xwP7A0cCLgH3w3X2pCmwAogNIa/kbcHWj/gj8mbQNcRHWIz3L3wM4sFH7AOMKOr6k4tgARAeQhrEauIf0qOBuYHbj3+8DHgXm0/wmROsBm5Km8bcGpjZqB2AX4Ln4CV6pLmwAogNIXfAUqRFYQWoYFjX+93HA+MY/b0wa/CUJbABsACRJteTHgCRJUrFsACRJqiEbAEmSasgGQJKkGrIBkCSphmwAJEmqIRsASZJqyAZAkqQasgGQJKmGbAAkSaohGwBJkmoohwZgVXQASZIKFj725dAALI8OIElSwZZFB7ABkCSpeDYA2ABIkurHBoAMToIkSQULv/nNoQFYHB1AkqSCLYoOkEMD8Gh0AEmSChY+9tkASJJUvPCxzwZAkqTihY99OTQA86MDSJJUsAXRAXJoAOZEB5AkqWD3RQfIoQG4JzqAJEkFCx/7bAAkSSrevdEBRkQHAMYBT5FHFkmSem01MIHgjfBymAFYCjwUHUKSpII8QAa74ObQAADcGh1AkqSC3BIdAPJpAG6ODiBJUkGyGPNyaQCy6IYkSSpAFmNeLg1AFt2QJEkFyGLMy2Xl/RjSl5HGRQeRJKmHlgAbASuig+QyA7AcuD46hCRJPfYHMhj8IZ8GAODK6ACSJPXYFdEB+tgASJJUnGzGulzWAABMAuaRVyZJkrplNWmsWxgdBPKaAZgP/Ck6hCRJPXI9mQz+kFcDAPDL6ACSJPXIr6ID9JdbA5DVyZEkqYuyGuNye94+EpgLbBodRJKkLnoU2AJYFR2kT24zAKuAi6NDSJLUZb8mo8Ef8msAAM6LDiBJUpedGx1gbbk9AoC0HfDDpK0SJUkqu4Wk6f9l0UH6y3EGYClwUXQISZK65EIyG/whzwYA4EfRASRJ6pLspv8hz0cAAKOA+4Ato4NIktSBh4DtgJXRQdaW6wzASuDM6BCSJHXoO2Q4+EO+MwAAOwB3kG+TIknSUNYAzwbuig4ykJwH17uBWdEhJElq0yVkOvhD3g0AwNejA0iS1KZvRAcYSs6PACA1KLcDz4oOIklSC/4G7EL6BHCWcp8BWA18KTqEJEktOo2MB3/IfwYAYAIwG5gcHUSSpCbMBbYHlgTnGFLuMwAAT+FaAElSeXyNzAd/KMcMAKTvAtyNnwmWJOVtPuk19sXRQYZThhkAgEXAF6NDSJI0jM9RgsEfyjMDALA+6X3KKdFBJEkawDxgR+Dx6CDNGBkdoAXLG78eHZpCkqSBfQj4XXSIZpVpBgBgDHAraWtFSZJycSewGxl+9ncwZVkD0Gc58P7oEJIkreUUSjT4Q/lmAPr8Bh8FSJLycClwVHSIVpW1AdgduAEYFR1EklRry4E9gb9EB2lVmRYB9jcXmAgcEh1EklRr/wmcFx2iHWWdAQAYC9xI+tiCJElFu5109780Okg7yrYIsL9lwMnAmuggkqTaWQ28mZIO/lDeRwB9ZgNbAvtGB5Ek1crXgW9Gh+hEmR8B9JkI/BHYOTqIJKkW/kK68XwqOkgnyvwIoM+TwGt5eqdASZJ6ZRlwIiUf/KH8jwD6PASsAo6MDiJJqrQPABdGh+iGKjwC6LMeaYOgF0YHkSRV0q+Al1KRxedVagAANgWuB6ZFB5EkVcpsYB9gfnSQbqnCGoD+FgAzgCXRQSRJlbGUNLZUZvCH6qwB6O9h4EHgH6KDSJIq4Y2kR8yVUsUGAOAmYEPgwOggkqRS+wxwWnSIXqjaGoD+1iPtzzwjOogkqZTOA15D2vWvcqrcAACMBy7DmQBJUmuuBY6gAu/7D6bqDQDAFOAK4NnRQSRJpfBX4FDg0eggvVS1twAGMhd4AXBPdBBJUvbuA15MxQd/qMcMQJ8dgd8BW0UHkSRl6QHgMODu6CBFqMMMQJ+7gKOBedFBJEnZmQscRU0Gf6hXAwBwG6m7eyA6iCQpGw+TviXzl+ggRarTI4D+tie9HbBDcA5JUqzZpG/I3BkdpGh1mwHocy/p9Y47gnNIkuLcDhxCDQd/qG8DAGml54GkVwQlSfVyDemR8JzoIFHq3ABA+rDDC4FzooNIkgpzPun18LnRQSJV9VsArVgFXND458MDc0iSeu8rwJuBFdFBotkAPO23pFcFXwyMjo0iSeqypcBbgU8Ba4KzZKGubwEMZU/SjMC06CCSpK64D3glcF10kJzUfQ3AQG4C9gMujg4iSerYr4C9cPBfh48ABrYE+AHwGGmhiOdJksplBfAJ0rR/Zb/o1wkfAQxvN+BsYPfoIJKkpvwVeC1wY3SQnHlnO7y5wFnAJsC+2DRJUq5WA18HTgDuD86SPQez1hwMfAvYJTqIJOkZ7gT+BZgVHaQsnAFozf3Ad0h7BxyE50+Soq0EPge8mppu6dsuZwDatyvwRdLnIyVJxfsN8G5q9hW/bvE1wPbdBhxNagD+HJxFkurkDuBVpI3bHPzb5BR25+4mPRZ4DNgbmBgbR5Iqay7wIeCfgVuCs5SejwC6ayLwduD9wKbBWSSpKhYAXwVOAxYHZ6kMG4De2Ag4hdQMTA7OIkllNY808H8ZB/6uswHorbGklamnAs8JziJJZXE36at938Jd/HrGBqAY6wEvB/4VOBIXX0rS2lYDlwLfAH7W+Hf1kA1A8bYBTgTeBmwXnEWSoj1E2m31dNKdvwpiAxBnFOk1wlcD/0BaNyBJdbAQ+AlwLnAJaTMfFcwGIA9jSe+zvgp4ETApNo4kdd2jwK+B80gb+CyLjSMbgPyMBPYHjmnU3rhmQFL5rAauJw36v2z886rQRHoGG4D8bQA8DziE9DGig4HxoYkkaV0rgJuBK4ErgMtI7+8rUzYA5TOa9DXC3YE9gOnAc0mLC72eknptNTCHtAX6n0g78t1C2pJ3RWAutcgBozrGAlOBacD2pIZgMrBZ49dJwARgQ9JjhtHA+hFBJWXlCdLAvYq02c5TwHzSM/t5jV/nAPcA9wKz8fl9JfwfsLR2WdFm1XYAAAAASUVORK5CYII=\" />\n      </defs>\n    </svg>\n    @if(copyOfInputAllFiles && copyOfInputAllFiles.length > 0){\n    <span (click)=\"openPopup()\" style=\"text-decoration: underline; cursor: pointer;\">\n      {{ copyOfInputAllFiles.length === 1 ? ('ONE_FILE_ATTACHED' | nxtCustomTranslate : '1 File Attached') : ('MULTIPLE_FILES_ATTACHED' | nxtCustomTranslate : '+' + copyOfInputAllFiles.length + ' Files Attached') }}\n    </span>\n    }\n    @else if(mode === 'edit') {\n    <div> {{ 'ADD_FILES' | nxtCustomTranslate : 'Add files' }} </div>\n    }\n    @else {\n    <div *ngIf=\"from !== 'nxtTable'\">{{ 'NO_FILES_ATTACHED' | nxtCustomTranslate : 'No files attached' }}</div>\n    }\n    <button *ngIf=\"mode === 'edit' && !question.isReadOnly\" \n            (click)=\"fileInput.click()\" \n            class=\"add-btn-icon\"\n            type=\"button\">\n      <span class=\"plus-icon\">+</span>\n    </button>\n\n    <input #fileInput type=\"file\" name=\"fileUpload\" multiple=\"multiple\" [accept]=\"allowedFileTypes.join(',')\"\n          style=\"display:none;\" (change)=\"uploadMultipleFiles($event)\" />\n  </div>\n  <!-- SKS13JUN25 edit icon -->\n  <svg *ngIf=\"mode !== 'edit' && !viewEdit && !question.isReadOnly && from !== 'nxtTable' \" class=\"edit-icon\" (click)=\"viewEditClick(question)\"\n    width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\" 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  <!-- SKS13JUN25 save and cancel icons -->\n  <div *ngIf=\"viewEdit\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n    style=\"padding-right: 5px;\">\n    <svg *ngIf=\"!isSaveHovered\" width=\"12\" height=\"12\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n    </svg>\n\n    <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n        fill=\"#259566\" />\n      <path\n        d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n        fill=\"white\" />\n    </svg>\n  </div>\n  <div *ngIf=\"viewEdit\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\">\n    <svg *ngIf=\"!isDiscardHovered\" width=\"12\" height=\"12\" 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\n    <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n        fill=\"#FF3636\" />\n    </svg>\n  </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n  <!-- Error messages section -->\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\n    <small class=\"text-danger\">\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\n    </small>\n  </div>\n</div>\n\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\n\n<!-- SKS11JUN25 File Selection Popup Modal -->\n<div class=\"file-popup-overlay\" *ngIf=\"showPopup\" (click)=\"closePopup()\">\n  <div class=\"file-popup-modal\" (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"file-popup-header\">\n      <div class=\"popup-title\">{{ question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''}}</div>\n      <button class=\"close-btn\" (click)=\"closePopup()\">\n        <span class=\"close-icon\">\u00D7</span>\n      </button>\n    </div>\n\n    <!-- SKS11JUN25 Content -->\n    <div class=\"file-popup-content\">\n      <!-- SKS11JUN25 Left Panel - File List -->\n      <div class=\"file-list-panel\">\n        <div class=\"file-item\" *ngFor=\"let file of copyOfInputAllFiles; let i = index\"\n          [class.selected]=\"currentFile === file\" (click)=\"viewFile(file)\">\n          <div class=\"file-icon\">\n            <img style=\"width: 28px;height: 28px;\" [src]=\"getDocIcon(file?.name)\">\n          </div>\n          <div class=\"file-details\">\n            <div class=\"file-name\">{{ file.name }}</div>\n          </div>\n          <div *ngIf=\"!question.isReadOnly\" class=\"file-actions\">\n            <button class=\"action-btn\" (click)=\"$event.stopPropagation(); deleteFile(i)\" title=\"{{ 'DELETE' | nxtCustomTranslate : 'Delete' }}\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <polyline points=\"3,6 5,6 21,6\"></polyline>\n                <path d=\"m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2\"></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Empty state -->\n        <div class=\"empty-state\" *ngIf=\"!copyOfInputAllFiles || copyOfInputAllFiles.length === 0\">\n          <div class=\"empty-icon\">\uD83D\uDCC4</div>\n          <p>{{ 'NO_FILES_SELECTED' | nxtCustomTranslate : 'No files selected' }}</p>\n        </div>\n        <!-- Add Button -->\n        <button class=\"add-btn\" (click)=\"fileInput.click()\" title=\"{{ 'ADD_FILE' | nxtCustomTranslate : 'Add file' }}\">\n          {{ 'ADD_MORE_FILES' | nxtCustomTranslate : '+ Add More Files' }}\n        </button>\n      </div>\n\n      <!-- SKS11JUN25 Right Panel - Preview -->\n      <div class=\"file-preview-panel\">\n        @if(currentFile){\n        <div class=\"preview-content\">\n          @if(isImage && fileUrl){\n          <img [src]=\"fileUrl\" class=\"preview-image\" alt=\"File Preview\" />\n          }\n          @else if(fileUrl){\n          <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\n          }\n          @else if(isLoading){\n            <div class=\"loading-indicator\">\n              <p>{{ 'LOADING_PREVIEW' | nxtCustomTranslate : 'Loading preview...' }}</p>\n              <div class=\"spinner\"></div>\n            </div>\n          }\n          @else {\n          <div>{{ 'UNABLE_TO_LOAD_PREVIEW' | nxtCustomTranslate : 'Unable to load the file preview.' }}</div>\n          }\n        </div>\n        }\n        @else{\n        <div class=\"no-preview\">\n          <p>{{ 'SELECT_FILE_TO_PREVIEW' | nxtCustomTranslate : 'Select a file to preview' }}</p>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.form-control[disabled]{border-radius:5px}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.Invalid{border:1px solid red!important}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.file-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.file-popup-modal{background:#fff;border-radius:12px;width:90%;max-width:1000px;height:80%;max-height:600px;display:flex;flex-direction:column;box-shadow:0 20px 40px #0000001a;overflow:hidden}.file-popup-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e5e7eb;background-color:#fafafa}.popup-title{font-size:16px;font-weight:600;color:#111827;margin:0}.close-btn{background:none;border:none;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s}.close-btn:hover{background-color:#f3f4f6}.close-icon{font-size:24px;color:#6b7280;line-height:1}.file-popup-content{display:flex;flex:1;overflow:hidden}.file-list-panel{width:300px;border-right:1px solid #e5e7eb;background-color:#fff;overflow-y:auto;padding:16px 16px 60px;position:relative}.file-item{display:flex;align-items:center;padding:12px 16px;border-radius:8px;cursor:pointer;transition:background-color .2s;margin-bottom:8px;border:1px solid #dfe0e2;background-color:#fff}.file-item:hover{background-color:#f8fafc;border-color:#e2e8f0}.file-item.selected{background-color:#dbeafe;border-color:#3b82f6}.file-icon{margin-right:12px;flex-shrink:0}.file-details{flex:1;min-width:0}.file-name{font-size:14px;font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.file-actions{margin-left:8px}.action-btn{background:none;border:none;padding:4px;border-radius:4px;cursor:pointer;color:#6b7280;transition:all .2s}.action-btn:hover{background-color:#fef2f2;color:#dc2626}.file-preview-panel{flex:1;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;padding:32px}.preview-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.preview-image{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 4px 6px #0000001a}.no-preview{text-align:center;color:#6b7280}.empty-state{text-align:center;padding:32px 16px;color:#6b7280}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:14px}@media (max-width: 768px){.file-list-panel{padding-bottom:70px;width:100%}.add-btn{bottom:12px;left:12px;right:12px}.file-popup-modal{width:95%;height:85%}.file-popup-content{flex-direction:column}.file-preview-panel{flex:1;min-height:200px}}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}.file-inner-div{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px;align-items:center;gap:5px}.loading-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#555}.spinner{margin-top:10px;border:4px solid #f3f3f3;border-top:4px solid #007bff;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.add-btn{position:absolute;bottom:16px;left:16px;right:16px;background-color:#007bff;color:#fff;border:none;padding:12px 16px;font-size:14px;border-radius:6px;cursor:pointer;box-shadow:0 2px 6px #0003;transition:background-color .2s;z-index:10}.add-btn:hover{background-color:#0056b3}.add-btn-icon{width:25px;height:25px;border-radius:50%;border:none;background:#007bff;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative;overflow:hidden}.add-btn-icon:focus{outline:none!important}.add-btn-icon:hover{transform:scale(1.1);border:none}.add-btn-icon:active{transform:scale(.95)}.plus-icon{font-size:15px;font-weight:700;line-height:1;transition:transform .2s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtFileUploadComponent, decorators: [{
@@ -53091,7 +53005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             args: [{ selector: 'app-file-upload', standalone: true, imports: [
                         CommonModule, NxtCustomTranslatePipe
                     ], template: "<!-- SKS11JUN25 file-upload.component.html -->\n<div class=\"flex hover-wrapper\" style=\"align-items: center; gap: 10px;\">\n  <div class=\"flex file-inner-div\">\n    <svg *ngIf=\"from !== 'nxtTable'\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n      xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n      <rect width=\"24\" height=\"24\" fill=\"url(#pattern0_616_35125)\" />\n      <defs>\n        <pattern id=\"pattern0_616_35125\" patternContentUnits=\"objectBoundingBox\" width=\"1\" height=\"1\">\n          <use xlink:href=\"#image0_616_35125\" transform=\"scale(0.00195312)\" />\n        </pattern>\n        <image id=\"image0_616_35125\" width=\"512\" height=\"512\" preserveAspectRatio=\"none\"\n          xlink:href=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAIABJREFUeJzt3XfYH1WZ//F3SE/oCaETAgoiJXTpggiKgitR1JUVXcu6+LOg/izsWqKra8e66qLigooIAipWykaUJiAgRUVqILSEhCSU9GT/ON9HHpKnfOvcZ2ber+u6r4AXV+aTmcece86cOTMCVcU4YBqwfaO2ATYDJgOTGr+OBzZu/PdjgIlFh5R6ZBWwuPHPTwLLgceBR4B5wKONXx8E7gHuAuYAawpPKmViRHQAtWwMsCuwe6OmN/59q8hQUgktJTUDdwA3Azc0anZkKKkoNgD5mwwcBBzcqH2BsaGJpGpbQGoErgJ+C1wDLIkMJPWCDUB+RpEG/GOAF5Pu8L1OUpylwB+AWcAlpIZgdWgiqQscWPIwHngJ8CrgaJ5+Ti8pP48APwN+AlwGLIuNI7XHBiDOGNId/quBlwHrx8aR1IbHgZ8DZ5FmB1bFxpGaZwNQvGcBbwbeAGweG0VSFz0I/Bj4DmlRoZQ1G4BijASOB04GjsDzLlXdFcCXgQtxVkCZciDqrXGk5/r/BuwcnEVS8e4FvgmcDjwWG0V6JhuA3tgEeA/wNmDT4CyS4i0mNQGfJW1IJIWzAeiu9YH/B3wQV/JLWteTpDUCnwTmBmdRzdkAdMc44J3A+0nb7krSUBYBX2zU4mH+W6knbAA6dxzwJWCH6CCSSmc+8B/AV3FzIRXMBqB900kD/+HBOSSV3zXAO4Dro4OoPtaLDlBC40kLea7HwV9SdxxA2m74dNIiYqnnnAFozaHAt/CVPkm98wjwr6SthqWecQagOeuTOvPLcfCX1FubkzYQ+i6+TaQecgZgePsDPyBt4StJRZoDvJH0nQGpq0ZGB8jYeqRX+34IbBacRVI9bQj8E2nt0SxgTWwcVYkzAAObApxD2rdfknJwCXAi7iSoLrEBWNf+pC96bRsdRJLWMof0CfGrooOo/FwE+EwnAb/FwV9SnrYhPQp4XXQQlZ9rAJKRpE19Pg2MDs4iSUMZCbycNIN7eXAWlZgNAEwEfgS8PjqIJDVpBGkjsu2BXwKrIsOonOq+BmAL4GfAftFBJKlNl5FmBJ6IDqJyqXMDMBW4FN/vl1R+VwIvwS8LqgV1bQCmkbrmadFBJKlLrgdeBCyIDqJyqGMDsAvpzn+r6CCS1GU3AEdhE6Am1K0B2I30Cs3k6CCS1CPXAS/ANQEaRp32AXgWcDEO/pKqbT/gp8DY6CDKW11eA9yWdOfvBj+S6mAasCNwQXQQ5asODcAWwO+AHaKDSFKBdgfGkdY8SeuoegMwEfgN6dm/JNXNIcBc0hsC0jNUeRHgeqSP+hwfHUSSAq0AjgR+Hx1EeanyIsAv4uAvSaOBc/HVZ62lqg3AW4F3RoeQpExsQZoRHRMdRPmo4hqA/Und7qjoIJKUkW2BDYFfRwdRHqrWAEwhbfG7aXQQScrQAcD9wI3RQRSvSosARwKXAEdEB5GkjC0BDgX+GB1Esaq0BuBUHPwlaTjjgQtJM6aqsarMAOwDXE1a7SpJGt6VpG8GLI8OohhVWAMwkbTHv92sJDVvO2AT4FfRQRSjCg3AfwFHR4eQpBLaH7gPuCk6iIpX9kcAhwP/S/n/HJIUZRlwGHBtdBAVq8wD53jgZtJnfiVJ7XsI2Bd4MDqIilPmtwA+joO/JHXDlqSdAsdGB1FxyroGYDpwBuVuYCQpJ9sCk4FfRAdRMcraAJwD7BAdQpIqZl/S4wA3CaqBMq4BeCVwXnQISaooPx9cE2VrAMYCt+Kzf0nqpYdJswEPRAdR75TtGfq7cPCXpF7r+3ywiwIrrExrANYHfkTa+U+S1FvbkHYL/El0EPVGmRqAU4GXRoeQpBqZDswFro8Oou4ryxqAjYG7SftWS5KKswI4Crg8Ooi6qyxrAN6Lg78kRRhNevy6TXQQdVcZZgAmkD5WMSk6iCTV2I3AwcCS6CDqjjLMALwZB39JirYX8N/RIdQ9uS8CHAl8H9g0OogkienAAvxyYCXkPgNwPLBjdAhJ0t99gfQpdpVc7g3AydEBJEnPMJq0SdC06CDqTM6LAHcE7iDvjJJUVzeRFgU+FR1E7cl5BuBfcPCXpFztCZweHULty3UR4Gjgf0jb/0qS8rQH8DhwdXQQtS7XGYBjSB+jkCTl7TOkzwerZHJtAF4THUCS1JRRwLn4xlbp5PiMfQLwCE7/S1KZ3AwcBDwZHUTNyXEG4CU4+EtS2ewBnEWeN5YaQI6LAD8K7BodQpLUsl1IrwVeGR1Ew8utUxsFzCN9/leSVD6rgWOBX0UH0dByewRwEA7+klRm6wE/AJ4VHURDy60BOCY6gCSpY5sAPwM2jA6iwdkASJJ6YRfgTPJ71KyGnBYBTgY+jz8sklQVzwGWA7+PDqJ15TQDcDAO/pJUNf9BWhSozOTWAEiSqmU94GzSIwFlxAZAktRrGwAXAhtFB9HTcplyHwssavwqSaqmnwAzgDXRQZTPDMBzcfCXpKp7OfDh6BBKcmkA9ogOIEkqxEzgFdEhZAMgSSrWCOC7+M2XcDYAkqSibQBcgFu/h8qlAXhudABJUqF2In0+OJdxqHZy2AlwPPAp8nkjQZJUjJ1JDcCs6CB1lEPntT0O/pJUVx8CTogOUUe5NACSpHoaAZwB7BYdpG5yaACmRQeQJIVan/T54EnRQeokhwZgm+gAkqRw04Dvkce4VAs5nOjNogNIkrJwDPCJ6BB1kUMD4JSPJKnPB4FXR4eogxwagMnRASRJ2ejbKXDv6CBVZwMgScrNeOB8HB96KocGYIPoAJKk7GwP/IA8NqyrpBwaAD8DLEkayNGknWLVAzk0AGOiA0iSsvU+4PXRIaoohy14nyI975EkaSBLgEOBP0YHqZIcGoCV+IxHkjS02cB+wLzoIFWRwyMAB39J0nCmAucAo6KDVEUODYAkSc14AfDZ6BBVkcMjgDXRASRJpfIm0hcE1QEbAElS2SwFDgOuiw5SZjYAkqQyuh/YF5gbHaSsXAMgSSqjbYELcC+ZttkASJLK6mDgC9EhyspHAJKksnsL8O3oEGVjAyBJKrtlpEWB10YHKRMbAElSFTxEWhT4YHSQsnANgCSpCrYEfoxfmG2aDYAkqSoOBL4UHaIsfAQgSaqatwKnR4fInQ2AJKlqVgBHAr+PDpIzGwBJUhU9TFoU+EB0kFy5BkCSVEVb4KLAIdkASJKq6gBcCzAoGwBJUpWdBJwcHSJHrgGQJFXdCuAo4PLoIDmxAZAk1cEjwH6kzwgLHwFIkuphc+CnwPjoILmwAZAk1cVewH9Hh8iFDYAkqU5eB7wjOkQOXAMgSaqblcDRwKzoIJFsACRJdTSftCjwnuggUXwEIEmqo0nABcCE6CBRbAAkSXW1JzXeKdAGQJJUZycC74kOEcE1AJKkulsFHAv8OjpIkWwAJEmCBcD+wF3RQYriIwBJkmBT0qLAidFBimIDIElSsgdwFnnMjvecDYAkSU+bAbwvOkQRcuhyXAMgScrJauA44JfRQXrJBkCSpHU9RloUeGd0kF7xEYAkSevaBPgZsGF0kF6xAZAkaWC7AGeSx2x519kASJI0uJcDp0aH6IUcuhrXAEiScrYaeBFwaXSQbrIBkCRpeA8Au5MWB1aCjwAkSRre1sBp0SG6yRkASZKaNwO4MDpEN9gASJLUvLmkRwFzo4N0ykcAkiQ1bwrw5egQ3eAMgCRJrXsVcF50iE7YAEiS1Lq5wE7Aougg7fIRgCRJrZsCfDQ6RCecAZAkqT0rgb2AW6ODtMMZAEmS2jMK+GJ0iHbZAEiS1L4XAsdFh2iHjwAkSerMXcCuwLLoIK1wBkCSpM7sCJwSHaJVzgBIktS5xcA0YEF0kGY5AyBJUuc2BN4VHaIVzgBIktQdi0izAKX4ZLAzAJIkdcdGwDuiQzTLGQBJkrpnIWkWYGF0kOE4AyBJUvdsDJwcHaIZzgBIktRd80mzAI9HBxmKMwCSJHXXJOAt0SGG4wyAJEndN5u0QdCq6CCDsQGQFGE5cC9pC9U7gYeBB4FHSN9Zfwp4koGnUCcA40jPWicBmzVqa9K06w6N2qiXfwCpCS8DLooOMRgbAEm9thi4BrixUTeRBv1e3xltB+zeqH2Ag4CtenxMqb9LgKOjQwzGBkBStz0BXAr8L/B74BbymQadChwMHEn6i3mb2DiquDXATqSGNzs2AJK6YQ5wPvBz0qBflq+i7QIcC8wAnkcefyeqWj4JfCg6xEBy+GG3AZDKaS5wDnAucBXl///yNsArgJOAvYOzqDrmANuTzyzY39kASGrFauBi4NukxU3LY+P0zO7A64E3kBYaSp04Bvh1dIi12QBIasYTwNnAacDtwVmKNBZ4NfBuYM/gLCqv75FmlrJiAyBpKI8Anwe+RfrSWZ0dCfwb8ILoICqdRcAWwNLoIP25E6CkgcwF/j/pffrP4+APcBmpCTgQ+GVwFpXLRsCLokOszQZAUn9PAh8lDfxfIG3Io2e6Bngp8Hzg6uAsKo8TogOszUcAkiAt7vsf4MOkHfnUvBmkZmn74BzK2wJgc2BldJA+zgBIupm0Oc6bcPBvxwXAc4GPkdkzXmVlU9Ljo2zYAEj19STpOf8+pGlttW8JMBPYDZgVG0UZe2l0gP58BCDV01Wk99yz3KK05EYAbwU+C2wQnEV5uRmYHh2ijw2AVC/LSVPVnyHDnckqZirwfeCQ6CDKxhpgCvBodBDwEYBUJ/eSBqP/xMG/CLOBI4CP4/lWMoL09kgWbACkevgF6Vn/ddFBamYl6bXKI4GHg7MoD4dHB+hjAyBV2xrgI8BxpNeQFONyYF/gD9FBFO7Q6AB9XAMgVdcq0v7jZ0cH0d+NBf6L9Mql6mklaWfA8E22nAGQqusUHPxzswx4M3Aq3vzU1Sgy+bCUDYBUTecCX4sOoUF9GjiR1BCofvaLDgA2AFIVLQLeGR1Cw/oh6TvxT0QHUeGy2AvABkCqnq+SPuOr/M0ivSo4PzqICrVLdABwEaBUNStJX/K7PzqIWrI38BtgcnQQFWIRsHF0CGcApGr5KQ7+ZXQD6Xvxi6KDqBAbAVtHh7ABkKrlp9EB1LYbgBfjmoC62CE6gA2AVC1XRQdQR64Bjse3A+pganQAGwCpOh4B7ooOoY5dSvpSo+ujqm3b6AA2AFJ13BEdQF3zI9JHhFRd20UHsAGQqsMFZNXyMeAH0SHUM1OiA9gASNWxMDqAumoNadvgG6KDqCc2jQ5gAyBVh/9/rp6lwKuwuasiGwBJXRO+qEg9cRcuCqyi8AbAnQCl6riPDF4tasMIUvOyU6OmkHZJ66vRwJON/3YhsASYDcwhbXp0JzCv2Mghvgq8PTqEumY+wTs/2gBI1bEK2AR4PDrIMCYDhzXqUNK+6OM7/D3vA64D/gBc3ahVHf6euZkA/BF4TnQQdcXjwIaRAWwApGo5FvhFdIgBPJf0LHsGsBu9/7tnPvBL4GekPfZzb4qatS9ps6fR0UHUsWXAuOgQ0dZYltW1Oot8bA78O3AzsefkCeBbwF69/eMW5hPE/5xZndfqtS9s0ZwBkKrlKWAaMDcww+7AKcCJwNjAHAO5GvgycB4Z/AXcpvGkpupZ0UHUsdAx2LcApGqZQLrrjrA38GvgT8AbyW/wBzgQOIf0bv1Lg7O0awnwtugQUjdET8NYVtVqJfA8irMd6dHDqi7/OYqo3wP7dP+UFOIc4s+f1VmF8hGAVE1zSE3Agz08xljgQ8B76XwVf6SVwGdJe++X6St82wN/wYVkZeYjAEldtw0wi97tCzAduJbUAJR58AcYBfwb6RW7/YKztOJe4CvRIVRezgBI1TYXOIn0Klw3jALeD3wUGNOl3zMnK4B3Ad+IDtKkjUgbIYVuKKO2OQMgqWemAL8Cvgfs0OHvNZ30DvonqebgD+n9+q8D36Qc79ovAj4fHULl5AyAVB+rSc3A14BLSc++hzOCtFvf24ATqNdNw+9IGxfNjw4yjPWBe3AWoIxCx2AbAKmeniRtnXsF6WMzi0l3k5DWD0wl7cv/AmDLiICZuAl4Ifk3AR8EPhUdQi2zAYgOIElD+BOpCXg0OsgQNiB9GGmj6CBqiWsAJClj04HLyHuK/XHgO9EhVC7OAEhSc64jPRJ5IjrIIKaS3ggYFR1ETXMGQJJKYD/SNwRyfTtgNunrh1JTbAAkqXkvBs4k3787vx0dQOXhIwBJat2ngVOjQwxgJOmVwG2jg6gpPgKQpJL5APAP0SEGsIo0QyENyxkASWrPo8BepA8v5WQn4PboEGqKMwCSVEKTgbPJb9X930h7F0hDsgGQpPYdSvqSYG7Oiw6g/PkIQJI6sxTYjbSlci58DFAObgUcHUAq2ELgDtJU7SLSLm6LSPvzLwM2Jn3gZSJpi9epwLOB7XDWLlc/B46LDrGWv5F+bpSv0DE4t2dXUtU8Tvqq3CzgWtJd2dw2f6+xpL/QdyVNPR8OPJc8Gvm6O7ZRP48O0s+vsQHQEHL4i8MZAFXNncAPSH8BX09zn91t1xTg+cDxpNfSJvTwWBraXaSGbHl0kIaXkldDonX5CCA6gNQFC4FzgbOAq4j5uV6f1AicSPp63ciADHX3RuC70SEaJgILgDHRQTQoG4DoAFIH5gLfAE4DFgdn6W8q8B7gzTgrUKTbSbMAq6ODNFwNHBAdQoNyHwCphB4BPghsD8wkr8Ef0odh3kVqBD5GuhNU7+0MvDw6RD9XRAdQvmwApNYsBz5BGvg/AywJTTO8R0kNyo7A10hbxaq3PhgdoJ8rowMoXz4CkJp3BfBW4M/RQTowndQIHBIdpOL2AW6IDgFsBTwQHUKD8hGAlLmlwMnAYZR78Ie0RexhwBtIew+oN06MDtDwIO2/dqqKswGQhnY/6TW7b1Kd2ao1pC/GTSctElP3/SP5vIXhdwE0IBsAaXCXkL72dm10kB6ZTdpM6ItUp7nJxZakc5sDGwANyAZAGthXgGOA+dFBemw56XXB40lbEat7TogO0PDX6ADKkw2AtK7Pk16hq9OK+Z8CRwDzooNUyBHRARpy+kiRMmIDID3TZ4H3RYcIch1pgeB90UEqYidg6+gQpK2ppXXYAEhP+zjwgegQwf4KHATcFh2kIg6PDkB6DXBpdAjlxwZASj4GfDQ6RCYeAI4C7okOUgGHRwcgLfB8MDqE8mMDIKWd8mYGZ8jNQ6Qm4JHoICW3R3SAhoejAyg/NgCqu5mku3+t6y7SN+6fiA5SYjtHB2h4KDqA8mMDoDr7GA7+w7keeB3uE9CujYAp0SFwN0ANwAZAdTUTp/2b9RPS9wPUnmdHBwAejw6g/NgAqI6882/d+4CbokOU1A7RAcjvc9XKgA2A6uZjeOffjmXAa3C3wHZsFB0AGwANwAZAdTITB/9O3E7aK0GtWT86AKmBk57BBkB1MROn/bvhS6RGQM3bIDoALuLUAGwAVAczcfDvluXAO6JDlEwODcDq6ADKjw2Aqs4Ff913CXBRdAi1xAZA67ABUJXNxGf+vfJhnFZuVg4L8MZGB1B+bABUVTPxzr+X/gRcFh2iJHLYSXF8dADlxwZAVTQTB/8ifDY6QEnksAnPuOgAyo8NgKrGZ/7FuQS4MTpECSyKDgBMiA6g/NgAqEpm4jP/op0RHaAE7ooOAEyODqD82ACoKmbinX+EHwEro0Nk7m/RAbAB0ABGRQeQuqDM0/6TgQOB5wHTSc9q1yft3HZHo64CrgZWBWUcyjzgUuDF0UEytQCYHx0CGwBlao1ldVAzKZ/1gGOAC4EVNPfnvB/4IHk+yz2J+J+DXOvqDs5rN/2Z+HNhrVu1F30BrPLWTMrnANIrdO3+me8Hjio89dAmkzaaif55yLFy+IzyCNJHnKLPhbVu1V70BbDKWTMpl9HAV0nT+J3+2VcB7yw2/rBuJv5nIsd6RScntUs2I/48WANX7UVfAKt8NZNyGQ2cT/fPw1uL/EMM4yvE/1zkVquASZ2c1C7Zj/hzYQ1coXwLQGXzMcrVAIwGzgFm9OD3/hrwkh78vu24PDpAhm4mjwWAO0UHUJ5sAFQmDv7PNAo4D9i7R79/K3JZ7JaTS6IDNOwaHUB5sgFQWTj4D2wCcC6wYY+PM5wHyeOjNzk5OzpAgw2ABmQDoDJw8B/ajuSxD0IOG97k4hbgpugQDbtFB1CebACUOwf/5rwdmFbwMdd2e/Dxc/K96AANk4j/uVCmbACUMwf/5o0C3htw3P7uCD5+LlYCP4gO0bAfaR8AaR02AMqVg3/r/hEYG3j8RwOPnZMfktZE5GD/6ADKlw2AcuTg355NgYMDj78w8Ni5WAV8MjpEPwdFB1C+bACUGwf/zhwaeGwbgPRaZi5rIcYAh0SHUL5sAJQTB//O7RJ47EWBx87BauAT0SH6eR4wMTqE8mUDoFw4+HfH5oHHXhl47Bz8N3BbdIh+XhAdQHmzAVAOHPy7Z3zgsccEHjvaQ8Cp0SHWkss20cqUDYCiOfh31xOBxx4XeOxo7yKvRyBbkV4BlAZlA6BIDv7dNyfw2JGvIEb6OWnxX06Oxff/NQwbAEVx8O+NWwOPXccFZ/cDb4oOMYDjowMofzYAivA5HPx75beBx94m8NgRlgGvBOZGB1nLFOCF0SGUv1HRAVQ7ZwAfiA7RgtHAjyjHHdVs4I+Bx98u8NgR3g5cGx1iAP+If7erCc4AqEjfA94CrIkO0qS+O/8yDP4A3yH23NZpBuAbwLejQwzixOgAUrPWWLWoS0kDalmMBs4n/rw1WwuBTXpyJpp3PfHnoYg6k3xvnvYg/vxYzVcop4lUhL8AJwArooM0qUzT/n0+AjwWePyRwHMCj1+UH5MW/a2ODjKIk6MDSK2I7sCs3tbDwFTKo2x3/muAWaQBONJ04s9Dr+s88r5p2gBYTPx5spqvULlOY6kaVpDu/GdHB2lSmVb797kPeC3pK3SR9g0+fq9dQDrPOW93/HpSEyCVRnQHZvWuTqE8ynjnP4/Yj//0903iz0ev6nzyX78yCrib+HNltVa1F30BrN7UDymPsg7+e/TiZLTpVuLPSS+qDIM/pFf/os+V1XrVXvQFsLpfd1KeqUgH/85NI/6c9KLKMviPAG4i/nxZrVco1wCo21YCrwMejw7ShL7V/mV65j8POBK4OTpIP8dFB+iBC4DXUI43V15BWoQplU50B2Z1t2ZSDqNJf8lHn69Wai553fn3+Q3x56abVZY7f0hvf9xG/Dmz2qvai74AVvfqOvJ+TaqP0/7dsxGwlPjz060q0+APcBLx58xqv2ov+gJY3akVwN7kzzv/7no78eenW1W2wX88cC/x581qv2ov+gJY3alPr31hM+Tg3303En+OulFlG/wBPk78ebM6q9qLvgBW53UXMGHtC5sZp/277wDiz1E3qoyD/zTgKeLPndVZ1V70BbA6r9z3zHfw740ziD9PnVYZB3+Ai4g/d1bnVXvRF8DqrGate0mz4rR/b2wHLCP+XHVSZR38X0v8ubO6U7UXfQGs9msVsM+6lzQbDv69czrx56qTKuvgPxl4hPjzZ3Wnai/6Aljt15kDXM9cOO3fO9sDy4k/X+1WWQd/gHOJP39W96r2oi+A1V6tAJ41wPXMgYN/b32b+PPVbpV58H8T8efP6m7VXvQFsNqrMwa6mBlw2r+39iNt9xx9ztqpMg/+zwIWE38Ore5W7UVfAKv1WgHsONDFDFbGO/8yDf6jKO97/2Ue/CdQ3vNuDV21F30BrNbrnAGvZKyRwI+JPzetVJkGf4D3En/O2qkyD/4A3yf+HFq9qdqLvgBW6/W8Aa9krM8Tf15aqbIN/tOAJ4g/b61W2Qf/dxN/Dq3eVe1FXwCrtbpy4MsY6p+JPy+tVNkG/zHANcSft1ar7IP/DNLjtujzaPWuai/6Alit1WsGvoxhDqVcG9KUbfAH+BLx563VqsLgX+ZXLa3mqvaiL4DVfD0KjB34MobYnHJtilLGwX8GsJr4c9dKOfhbZanai74AVvP1pUGuYZSfEH9Omq0yDv57AAuJP3etlIO/VaaqvegLYDVf0we5hhFOIv58NFtzgd17cxp6Zg/S5kTR566VcvC3yla1F30BrObqT4NdwABbAfOJPyfNlIN/MeXgb5WxQq0XHUCl8ePoAP18Gdg0OkQT5gEvBG6JDtKCPYDLSB+dKYsLSItTV0QHadMM0t4aZW5gpLZEd2BWc7XLYBewYPtTjkVp3vkXU975W2Wu2ou+ANbwddugV694s4g/H8NVWRf8OfgXy8Hfqr3oC2ANX58b9OoV66XEn4vhyjv/YsrB36pC1V70BbCGrxcOevWKdR3x52Ko8s6/mHLwt6pStRd9Aayh6ylg/KBXrzgHEH8uhirv/IspB3+rShXKtwA0nN8DS6JDACdHBxiCq/2L4Wp/qWKiOzBr6PrI4JeuMJNJTUj0uRiovPMvprzzt6pYoZwB0HCujg4AvB4YFx1iAN75F8M7f6miojswa/BaBWw0+KUrzFXEn4u1yzv/Yso7f6vKVXvRF8AavP48xHUryuakRiT6XPQvB/9iysHfqnqF8hGAhpLD1PZx5PVzOg84kjzOTbOc9i+e0/7KXk5/sSo/OewAeFx0gH4c/Ivh4C8VwAZAQ7k1+PgjgEOCM/Qp6+B/KQ7+RXLwV2mMig6grP0t+Pg7kMdX/8o6+HvnXywHf5WKMwAayuzg4+8XfPw+b8LBv9cc/KWC2QBoMPOBx4Mz7BN8fIBzgYuiQ7TAwb94Dv4qJRsADea+6ADArsHHXwKcEpyhFT7zL56Dv0rLNQAazMPRAYBtg49/HvBQcIZmeedfPAd/lZozABrM/OgAwNbBxz89+PjNcvAvnoO/Ss8GQIN5LPj4E4BNAo8/G7gy8PjNctq/eA7+qgQbAA1mQfDxtww+fg4fQRpO3+C/WXSQFjj4S5lwDYAGszT4+GODj39N8PGH47R/8Rz8VSnOAGgwy4KPH/2zeWfw8Yd5M6h2AAAQ2UlEQVTitH/xHPxVOc4AaDDLg48f/bP5ZPDxB+Odf/Ec/FVJ0XdZytfK4ONH/2wuCT7+QLzzL56Dvyor+i5L+Yr+Cy96AN4w+Phr886/eA7+qrTouyzlK3oR3qPBx98p+Pj9OfgXz8FflWcDoMGMCT7+AmB14PF3Djx2f077F8/BX7VgA6DBTAg+/ipiNyM6IvDYfXzPv3gO/qoNGwANZlJ0AGL34d+NNABHcfAvnoO/asUGQIPZNDoAcFvw8d8TdFwH/+I5+Kt2bAA0mBxmAG4NPv7rgH0KPubuOPgXzcFftWQDoMFE78UPcEvw8dcDvgesX9Dxdiet9nfwL46Dv2rLBkCDmRodgPgGAGAX0iDX69ciHfyL5+AvBVtjZVs5vHp2P/HnYQ3we3p3PvYA5mbwZ2ylzqfcA+cM0nbX0efRqneFcgZAQ5kaHQC4JDpAwyHAFcD2Xf59DwN+i3f+RfLOX8IGQEN7TnQA4OLoAP3sDFwHHNOF32sE8C5Sg7NJF36/ojj4S+qa6CkYa/D61BDXrSibkTYFij4X/Ws1aXHgNm3+mfYiPVKI/nO0Wk77W1Z3q/aiL4A1eF00xHUr0m+JPxcD1TLgDNI0/nCzaeOA44FfkBqI6OytloO/ZXW/Qo2IDkAGJ0GDuo881gG8AfhudIhhPAZcCfyFtKBvMWlqf2vSroIHAOPD0nXGaX+pN0LHYBsADWcrYrfkBZgIPExx7+PraQ7+Uu+EjsEuAtRwDowOADxJmoJWsRz8pQqzAdBwcmgAAL4RHaBmHPylirMB0HAOiQ7Q8AfSHvnqPQd/qQZcA6DhrAKmAAuigwCHA7OiQ1Scg79UHNcAKGsjgSOiQzT8lvT+vHrDwV+qERsANeNF0QH6+RDOGvWCg79UMzYAasZLyOdn5XfA96NDVIyDv1RDrgFQsw4hbXSTg82BvwIbRwepAAd/KY5rAFQKJ0QH6OcR4MPRISrAwV+qMWcA1Kw5pG2BV0cHaRhJei3w8OAcZeXgL8VzBkClsA35vA0A6fXE15C2CFZrHPwl2QCoJW+MDrCWR4DXkpoBNcfBXxJgA6DWzCB94S4ns4BPRYcoCQd/SX9nA6BWjAP+KTrEAD4KnB0dInMO/pKewUWAatU9wLPJb9p9NPBT4JjoIBly8Jfy5CJAlco04LjoEANYAbwSuCo6SGYc/CUNyAZA7Xh3dIBBPAW8DLg2OkgmHPwlDcoGQO04DDgoOsQg5gNHAr+JDhLsfBz8JQ3BBkDtmhkdYAhPAMcCZ0QHCfIV4NU4+EvK3BqrtHXIANczJyOAj5MWLEafqyJqKfD6rpy5ODOA5cSfS8sqokL5FoA6MQt4QXSIJhwFfI/0EaGqepg0eF4dHaQD3vmrbnwLQKV1BHm+EbC2S4A9gIujg/TIj0l/Pgd/SaUSPQVjdVa3U56/tEcCbwMeI/68daMeJS30Kzun/a26Vu1FXwCr8zplnauat82BM0lfNow+d+3UauCHwBbdPjEBHPytOlftRV8Aq/N6DNhy7QtbAocClxN//lqpS4B9enEyAjj4W3Wv2ou+AFZ36ry1L2yJHEraNyD6HA5VV5EWM1aFg79lKfwCWN2rl1Fu+5H2DlhM/LlcQ9rZ8DtU546/j4O/ZaUK5WuA6qb7SavRF0YH6dBE0iD1BuD5pMWDRVkFXAlcCJwFLCjw2EVwtb/0tNAx2AZA3XY2cGJ0iC7ahLS18NGNmtqDYzwMXAFcBPyCtJ1xFTn4S89kAxAdQF13IqkRqKKpwO7Abo1fdyWtxp/M8DMFDwMPAnOA24DrgOtJMydV5+AvrcsGIDqAum4hsCcwOzpIwSY3amLj3x9r/LoCeIT03LuOHPylgdkARAdQT9xE+mLgkuggCuXgLw3OrYBVSXsCX44OoVAO/lLGbADUS28B3hQdQiEc/KXM+QhAvbYceDHpy4GqBwd/qTmuAYgOoJ6bT1oP8LfoIOo5B3+pea4BUOVNAn4FTIkOop5y8JdKxAZARdkB+CmwQXQQ9YSDv1QyNgAq0gGkmYCJw/2HKhUHf6mEbABUtIOBC4Cx0UHUFQ7+UknZACjC0cCPsAkou1fh4C+Vlm8BKNIs0ieEn4gOopb9E/BdYFR0EKnEfAtAtXUE8Etgw+ggasnJwJk4+EulZgOgaIeSZgK2jA6iYY0APg58Hf/ukErPRwDKxYPAscCN0UE0oDHAd0hT/5K6w50AowMoG4uBE4CLo4PoGSaR3tw4LDqIVDGuAZAaNiStCZiJP5u52BO4Fgd/qXKcAVCuLgJOAhZGB6mx1wHfBCZEB5EqyhkAaQDHAdcAe0cHqaGJwLeBs3DwlyrLBkA52xn4A+mRwMjYKLWxH3AD8KboIJJ6y0cAKovLgTcA98bGqKxRwAeBj+DOflJRfAsgOoBK4ynSe+ifB1YFZ6mSvYDTgX2jg0g1YwMQHUClcz3wL7hnQKc2AP4DeDs+YpEiuAhQatG+pCbgLGCL4CxltB7pDYvbgXfh4C/VkjMAKrvFwKeALwFLg7OUwRHAF0jT/pJi+QggOoAqYS5wGvAVYElwlhwdBJxK2m5ZUh5sAKIDqFIeAD5N+lTtk8FZcvB84N+Bo6KDSFqHDUB0AFXSYuB/SG8M3B8bpXCjgZcD7wEOCM4iaXA2ANEBVGkrgAuBM4BLgNWxcXpqB+CfG7V1cBZJw7MBiA6g2riP9GjgHOCvwVm6ZSPgZaRNko4gj/9PS2qODUB0ANXSrcCPSZ+5vSU4S6smkRbzvZL0bH9sbBxJbbIBiA6g2psDXAz8BpgFzIuNs44xwP7A0cCLgH3w3X2pCmwAogNIa/kbcHWj/gj8mbQNcRHWIz3L3wM4sFH7AOMKOr6k4tgARAeQhrEauIf0qOBuYHbj3+8DHgXm0/wmROsBm5Km8bcGpjZqB2AX4Ln4CV6pLmwAogNIXfAUqRFYQWoYFjX+93HA+MY/b0wa/CUJbABsACRJteTHgCRJUrFsACRJqiEbAEmSasgGQJKkGrIBkCSphmwAJEmqIRsASZJqyAZAkqQasgGQJKmGbAAkSaohGwBJkmoohwZgVXQASZIKFj725dAALI8OIElSwZZFB7ABkCSpeDYA2ABIkurHBoAMToIkSQULv/nNoQFYHB1AkqSCLYoOkEMD8Gh0AEmSChY+9tkASJJUvPCxzwZAkqTihY99OTQA86MDSJJUsAXRAXJoAOZEB5AkqWD3RQfIoQG4JzqAJEkFCx/7bAAkSSrevdEBRkQHAMYBT5FHFkmSem01MIHgjfBymAFYCjwUHUKSpII8QAa74ObQAADcGh1AkqSC3BIdAPJpAG6ODiBJUkGyGPNyaQCy6IYkSSpAFmNeLg1AFt2QJEkFyGLMy2Xl/RjSl5HGRQeRJKmHlgAbASuig+QyA7AcuD46hCRJPfYHMhj8IZ8GAODK6ACSJPXYFdEB+tgASJJUnGzGulzWAABMAuaRVyZJkrplNWmsWxgdBPKaAZgP/Ck6hCRJPXI9mQz+kFcDAPDL6ACSJPXIr6ID9JdbA5DVyZEkqYuyGuNye94+EpgLbBodRJKkLnoU2AJYFR2kT24zAKuAi6NDSJLUZb8mo8Ef8msAAM6LDiBJUpedGx1gbbk9AoC0HfDDpK0SJUkqu4Wk6f9l0UH6y3EGYClwUXQISZK65EIyG/whzwYA4EfRASRJ6pLspv8hz0cAAKOA+4Ato4NIktSBh4DtgJXRQdaW6wzASuDM6BCSJHXoO2Q4+EO+MwAAOwB3kG+TIknSUNYAzwbuig4ykJwH17uBWdEhJElq0yVkOvhD3g0AwNejA0iS1KZvRAcYSs6PACA1KLcDz4oOIklSC/4G7EL6BHCWcp8BWA18KTqEJEktOo2MB3/IfwYAYAIwG5gcHUSSpCbMBbYHlgTnGFLuMwAAT+FaAElSeXyNzAd/KMcMAKTvAtyNnwmWJOVtPuk19sXRQYZThhkAgEXAF6NDSJI0jM9RgsEfyjMDALA+6X3KKdFBJEkawDxgR+Dx6CDNGBkdoAXLG78eHZpCkqSBfQj4XXSIZpVpBgBgDHAraWtFSZJycSewGxl+9ncwZVkD0Gc58P7oEJIkreUUSjT4Q/lmAPr8Bh8FSJLycClwVHSIVpW1AdgduAEYFR1EklRry4E9gb9EB2lVmRYB9jcXmAgcEh1EklRr/wmcFx2iHWWdAQAYC9xI+tiCJElFu5109780Okg7yrYIsL9lwMnAmuggkqTaWQ28mZIO/lDeRwB9ZgNbAvtGB5Ek1crXgW9Gh+hEmR8B9JkI/BHYOTqIJKkW/kK68XwqOkgnyvwIoM+TwGt5eqdASZJ6ZRlwIiUf/KH8jwD6PASsAo6MDiJJqrQPABdGh+iGKjwC6LMeaYOgF0YHkSRV0q+Al1KRxedVagAANgWuB6ZFB5EkVcpsYB9gfnSQbqnCGoD+FgAzgCXRQSRJlbGUNLZUZvCH6qwB6O9h4EHgH6KDSJIq4Y2kR8yVUsUGAOAmYEPgwOggkqRS+wxwWnSIXqjaGoD+1iPtzzwjOogkqZTOA15D2vWvcqrcAACMBy7DmQBJUmuuBY6gAu/7D6bqDQDAFOAK4NnRQSRJpfBX4FDg0eggvVS1twAGMhd4AXBPdBBJUvbuA15MxQd/qMcMQJ8dgd8BW0UHkSRl6QHgMODu6CBFqMMMQJ+7gKOBedFBJEnZmQscRU0Gf6hXAwBwG6m7eyA6iCQpGw+TviXzl+ggRarTI4D+tie9HbBDcA5JUqzZpG/I3BkdpGh1mwHocy/p9Y47gnNIkuLcDhxCDQd/qG8DAGml54GkVwQlSfVyDemR8JzoIFHq3ABA+rDDC4FzooNIkgpzPun18LnRQSJV9VsArVgFXND458MDc0iSeu8rwJuBFdFBotkAPO23pFcFXwyMjo0iSeqypcBbgU8Ba4KzZKGubwEMZU/SjMC06CCSpK64D3glcF10kJzUfQ3AQG4C9gMujg4iSerYr4C9cPBfh48ABrYE+AHwGGmhiOdJksplBfAJ0rR/Zb/o1wkfAQxvN+BsYPfoIJKkpvwVeC1wY3SQnHlnO7y5wFnAJsC+2DRJUq5WA18HTgDuD86SPQez1hwMfAvYJTqIJOkZ7gT+BZgVHaQsnAFozf3Ad0h7BxyE50+Soq0EPge8mppu6dsuZwDatyvwRdLnIyVJxfsN8G5q9hW/bvE1wPbdBhxNagD+HJxFkurkDuBVpI3bHPzb5BR25+4mPRZ4DNgbmBgbR5Iqay7wIeCfgVuCs5SejwC6ayLwduD9wKbBWSSpKhYAXwVOAxYHZ6kMG4De2Ag4hdQMTA7OIkllNY808H8ZB/6uswHorbGklamnAs8JziJJZXE36at938Jd/HrGBqAY6wEvB/4VOBIXX0rS2lYDlwLfAH7W+Hf1kA1A8bYBTgTeBmwXnEWSoj1E2m31dNKdvwpiAxBnFOk1wlcD/0BaNyBJdbAQ+AlwLnAJaTMfFcwGIA9jSe+zvgp4ETApNo4kdd2jwK+B80gb+CyLjSMbgPyMBPYHjmnU3rhmQFL5rAauJw36v2z886rQRHoGG4D8bQA8DziE9DGig4HxoYkkaV0rgJuBK4ErgMtI7+8rUzYA5TOa9DXC3YE9gOnAc0mLC72eknptNTCHtAX6n0g78t1C2pJ3RWAutcgBozrGAlOBacD2pIZgMrBZ49dJwARgQ9JjhtHA+hFBJWXlCdLAvYq02c5TwHzSM/t5jV/nAPcA9wKz8fl9JfwfsLR2WdFm1XYAAAAASUVORK5CYII=\" />\n      </defs>\n    </svg>\n    @if(copyOfInputAllFiles && copyOfInputAllFiles.length > 0){\n    <span (click)=\"openPopup()\" style=\"text-decoration: underline; cursor: pointer;\">\n      {{ copyOfInputAllFiles.length === 1 ? ('ONE_FILE_ATTACHED' | nxtCustomTranslate : '1 File Attached') : ('MULTIPLE_FILES_ATTACHED' | nxtCustomTranslate : '+' + copyOfInputAllFiles.length + ' Files Attached') }}\n    </span>\n    }\n    @else if(mode === 'edit') {\n    <div> {{ 'ADD_FILES' | nxtCustomTranslate : 'Add files' }} </div>\n    }\n    @else {\n    <div *ngIf=\"from !== 'nxtTable'\">{{ 'NO_FILES_ATTACHED' | nxtCustomTranslate : 'No files attached' }}</div>\n    }\n    <button *ngIf=\"mode === 'edit' && !question.isReadOnly\" \n            (click)=\"fileInput.click()\" \n            class=\"add-btn-icon\"\n            type=\"button\">\n      <span class=\"plus-icon\">+</span>\n    </button>\n\n    <input #fileInput type=\"file\" name=\"fileUpload\" multiple=\"multiple\" [accept]=\"allowedFileTypes.join(',')\"\n          style=\"display:none;\" (change)=\"uploadMultipleFiles($event)\" />\n  </div>\n  <!-- SKS13JUN25 edit icon -->\n  <svg *ngIf=\"mode !== 'edit' && !viewEdit && !question.isReadOnly && from !== 'nxtTable' \" class=\"edit-icon\" (click)=\"viewEditClick(question)\"\n    width=\"13\" height=\"14\" viewBox=\"0 0 13 14\" fill=\"none\" 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  <!-- SKS13JUN25 save and cancel icons -->\n  <div *ngIf=\"viewEdit\" (mouseenter)=\"isSaveHovered = true\" (mouseleave)=\"isSaveHovered = false\"\n    style=\"padding-right: 5px;\">\n    <svg *ngIf=\"!isSaveHovered\" width=\"12\" height=\"12\" 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=\"#837F8E\" />\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=\"#837F8E\" />\n    </svg>\n\n    <svg *ngIf=\"isSaveHovered\" (click)=\"saveChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M5.95 12.8004C9.23609 12.8004 11.9 10.1365 11.9 6.85039C11.9 3.5643 9.23609 0.900391 5.95 0.900391C2.66391 0.900391 0 3.5643 0 6.85039C0 10.1365 2.66391 12.8004 5.95 12.8004Z\"\n        fill=\"#259566\" />\n      <path\n        d=\"M8.88111 4.74622C8.83269 4.69759 8.77513 4.65899 8.71176 4.63266C8.64838 4.60633 8.58043 4.59277 8.5118 4.59277C8.44317 4.59277 8.37521 4.60633 8.31184 4.63266C8.24846 4.65899 8.19091 4.69759 8.14249 4.74622L4.8269 8.06386L3.35253 6.58949C3.30403 6.54099 3.24646 6.50252 3.18309 6.47627C3.11972 6.45003 3.05181 6.43652 2.98322 6.43652C2.91463 6.43652 2.84672 6.45003 2.78335 6.47627C2.71999 6.50252 2.66241 6.54099 2.61391 6.58949C2.56541 6.63799 2.52694 6.69557 2.50069 6.75893C2.47445 6.8223 2.46094 6.89022 2.46094 6.9588C2.46094 7.02739 2.47445 7.09531 2.50069 7.15867C2.52694 7.22204 2.56541 7.27961 2.61391 7.32811L4.45677 9.17097C4.50519 9.21961 4.56274 9.2582 4.62612 9.28453C4.6895 9.31086 4.75745 9.32442 4.82608 9.32442C4.89471 9.32442 4.96266 9.31086 5.02604 9.28453C5.08942 9.2582 5.14697 9.21961 5.19539 9.17097L8.88111 5.48484C8.92974 5.43642 8.96834 5.37887 8.99467 5.31549C9.021 5.25212 9.03456 5.18416 9.03456 5.11553C9.03456 5.0469 9.021 4.97895 8.99467 4.91557C8.96834 4.8522 8.92974 4.79465 8.88111 4.74622Z\"\n        fill=\"white\" />\n    </svg>\n  </div>\n  <div *ngIf=\"viewEdit\" (mouseenter)=\"isDiscardHovered = true\" (mouseleave)=\"isDiscardHovered = false\">\n    <svg *ngIf=\"!isDiscardHovered\" width=\"12\" height=\"12\" 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\n    <svg *ngIf=\"isDiscardHovered\" (click)=\"discardChanges()\" width=\"12\" height=\"13\" viewBox=\"0 0 12 13\" fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"M7.05555 4.97471L5.94 6.09026L4.82445 4.97471C4.57861 4.72887 4.18191 4.72887 3.93607 4.97471C3.69023 5.22055 3.69023 5.61725 3.93607 5.86309L5.05162 6.97864L3.93607 8.09419C3.69023 8.34003 3.69023 8.73673 3.93607 8.98257C4.18191 9.22841 4.57861 9.22841 4.82445 8.98257L5.94 7.86702L7.05555 8.98257C7.30139 9.22841 7.69809 9.22841 7.94393 8.98257C8.18977 8.73673 8.18977 8.34003 7.94393 8.09419L6.82838 6.97864L7.94393 5.86309C8.18977 5.61725 8.18977 5.22055 7.94393 4.97471C7.69809 4.73873 7.30021 4.73873 7.05555 4.97471ZM5.94 1.06062C2.70017 1.06062 0.0808594 3.67993 0.0808594 6.91977C0.0808594 10.1596 2.70017 12.7789 5.94 12.7789C9.17983 12.7789 11.7991 10.1596 11.7991 6.91977C11.7991 3.67993 9.17983 1.06062 5.94 1.06062ZM5.94 11.6153C3.35426 11.6153 1.24422 9.50525 1.24422 6.91977C1.24422 4.33412 3.35426 2.22408 5.94 2.22408C8.52558 2.22408 10.6356 4.33412 10.6356 6.91977C10.6356 9.50525 8.52558 11.6153 5.94 11.6153Z\"\n        fill=\"#FF3636\" />\n    </svg>\n  </div>\n</div>\n\n<div class=\"col-lg-6\" style=\"padding:0;margin-top: 10px;\">\n  <!-- Error messages section -->\n  <div class=\"file-constraints\" *ngIf=\"validationErrors.length > 0\">\n    <small class=\"text-danger\">\n      <div *ngFor=\"let error of validationErrors\">{{ error }}</div>\n    </small>\n  </div>\n</div>\n\n<div *ngIf=\"error\" class=\"error-msg\" style=\"margin-top: 10px;\">{{question?.errorMessage}}</div>\n\n<!-- SKS11JUN25 File Selection Popup Modal -->\n<div class=\"file-popup-overlay\" *ngIf=\"showPopup\" (click)=\"closePopup()\">\n  <div class=\"file-popup-modal\" (click)=\"$event.stopPropagation()\">\n    <!-- Header -->\n    <div class=\"file-popup-header\">\n      <div class=\"popup-title\">{{ question?.questionText ? ((question?.id+'.questionText') | nxtCustomTranslate : question?.questionText): ''}}</div>\n      <button class=\"close-btn\" (click)=\"closePopup()\">\n        <span class=\"close-icon\">\u00D7</span>\n      </button>\n    </div>\n\n    <!-- SKS11JUN25 Content -->\n    <div class=\"file-popup-content\">\n      <!-- SKS11JUN25 Left Panel - File List -->\n      <div class=\"file-list-panel\">\n        <div class=\"file-item\" *ngFor=\"let file of copyOfInputAllFiles; let i = index\"\n          [class.selected]=\"currentFile === file\" (click)=\"viewFile(file)\">\n          <div class=\"file-icon\">\n            <img style=\"width: 28px;height: 28px;\" [src]=\"getDocIcon(file?.name)\">\n          </div>\n          <div class=\"file-details\">\n            <div class=\"file-name\">{{ file.name }}</div>\n          </div>\n          <div *ngIf=\"!question.isReadOnly\" class=\"file-actions\">\n            <button class=\"action-btn\" (click)=\"$event.stopPropagation(); deleteFile(i)\" title=\"{{ 'DELETE' | nxtCustomTranslate : 'Delete' }}\">\n              <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <polyline points=\"3,6 5,6 21,6\"></polyline>\n                <path d=\"m19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2\"></path>\n              </svg>\n            </button>\n          </div>\n        </div>\n\n        <!-- Empty state -->\n        <div class=\"empty-state\" *ngIf=\"!copyOfInputAllFiles || copyOfInputAllFiles.length === 0\">\n          <div class=\"empty-icon\">\uD83D\uDCC4</div>\n          <p>{{ 'NO_FILES_SELECTED' | nxtCustomTranslate : 'No files selected' }}</p>\n        </div>\n        <!-- Add Button -->\n        <button class=\"add-btn\" (click)=\"fileInput.click()\" title=\"{{ 'ADD_FILE' | nxtCustomTranslate : 'Add file' }}\">\n          {{ 'ADD_MORE_FILES' | nxtCustomTranslate : '+ Add More Files' }}\n        </button>\n      </div>\n\n      <!-- SKS11JUN25 Right Panel - Preview -->\n      <div class=\"file-preview-panel\">\n        @if(currentFile){\n        <div class=\"preview-content\">\n          @if(isImage && fileUrl){\n          <img [src]=\"fileUrl\" class=\"preview-image\" alt=\"File Preview\" />\n          }\n          @else if(fileUrl){\n          <iframe [src]=\"fileUrl\" width=\"100%\" height=\"500px\"></iframe>\n          }\n          @else if(isLoading){\n            <div class=\"loading-indicator\">\n              <p>{{ 'LOADING_PREVIEW' | nxtCustomTranslate : 'Loading preview...' }}</p>\n              <div class=\"spinner\"></div>\n            </div>\n          }\n          @else {\n          <div>{{ 'UNABLE_TO_LOAD_PREVIEW' | nxtCustomTranslate : 'Unable to load the file preview.' }}</div>\n          }\n        </div>\n        }\n        @else{\n        <div class=\"no-preview\">\n          <p>{{ 'SELECT_FILE_TO_PREVIEW' | nxtCustomTranslate : 'Select a file to preview' }}</p>\n        </div>\n        }\n      </div>\n    </div>\n  </div>\n</div>", styles: [".document-cnt{padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f9f9f9;margin-bottom:10px;cursor:pointer;transition:background-color .3s ease;position:relative}.document-cnt:hover{background-color:#e9ecef}.document_image img{width:30px;height:30px}.document_name{font-size:14px;font-weight:700;color:#333;line-height:30px}.label{margin-bottom:0}.document_delete img,.preview-icon img{width:20px;height:20px;cursor:pointer;transition:transform .3s ease}.document_delete img{filter:brightness(0) saturate(100%) invert(20%) sepia(97%) saturate(7481%) hue-rotate(357deg) brightness(98%) contrast(119%)}.document_delete img:hover,.preview-icon img:hover{transform:scale(1.1)}.document_delete,.preview-icon{position:absolute;top:50%;transform:translateY(-50%)}.document_delete{right:10px}.preview-icon{right:40px}@media (min-width: 992px){.document-cnt{margin-left:10px}}.form-control[disabled]{border-radius:5px}.btn-primary{background-color:#03a9f4!important;border:1px solid #03a9f4!important;color:#fff!important}.btn.btn-primary{border-radius:2px;padding:6px 14px;font-size:14px}.Invalid{border:1px solid red!important}.close-button{background:none;border:none;font-size:1.5em;cursor:pointer}.img-fluid{max-width:100%;height:auto;flex:1}iframe{border:none}.file-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.file-popup-modal{background:#fff;border-radius:12px;width:90%;max-width:1000px;height:80%;max-height:600px;display:flex;flex-direction:column;box-shadow:0 20px 40px #0000001a;overflow:hidden}.file-popup-header{display:flex;justify-content:space-between;align-items:center;padding:8px;border-bottom:1px solid #e5e7eb;background-color:#fafafa}.popup-title{font-size:16px;font-weight:600;color:#111827;margin:0}.close-btn{background:none;border:none;width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s}.close-btn:hover{background-color:#f3f4f6}.close-icon{font-size:24px;color:#6b7280;line-height:1}.file-popup-content{display:flex;flex:1;overflow:hidden}.file-list-panel{width:300px;border-right:1px solid #e5e7eb;background-color:#fff;overflow-y:auto;padding:16px 16px 60px;position:relative}.file-item{display:flex;align-items:center;padding:12px 16px;border-radius:8px;cursor:pointer;transition:background-color .2s;margin-bottom:8px;border:1px solid #dfe0e2;background-color:#fff}.file-item:hover{background-color:#f8fafc;border-color:#e2e8f0}.file-item.selected{background-color:#dbeafe;border-color:#3b82f6}.file-icon{margin-right:12px;flex-shrink:0}.file-details{flex:1;min-width:0}.file-name{font-size:14px;font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.file-actions{margin-left:8px}.action-btn{background:none;border:none;padding:4px;border-radius:4px;cursor:pointer;color:#6b7280;transition:all .2s}.action-btn:hover{background-color:#fef2f2;color:#dc2626}.file-preview-panel{flex:1;background-color:#f9fafb;display:flex;align-items:center;justify-content:center;padding:32px}.preview-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.preview-image{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 4px 6px #0000001a}.no-preview{text-align:center;color:#6b7280}.empty-state{text-align:center;padding:32px 16px;color:#6b7280}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-state p{margin:0;font-size:14px}@media (max-width: 768px){.file-list-panel{padding-bottom:70px;width:100%}.add-btn{bottom:12px;left:12px;right:12px}.file-popup-modal{width:95%;height:85%}.file-popup-content{flex-direction:column}.file-preview-panel{flex:1;min-height:200px}}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}.file-inner-div{width:100%;padding:10px 10px 10px 5px;border-radius:5px;border:none;font-size:14px;align-items:center;gap:5px}.loading-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#555}.spinner{margin-top:10px;border:4px solid #f3f3f3;border-top:4px solid #007bff;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.add-btn{position:absolute;bottom:16px;left:16px;right:16px;background-color:#007bff;color:#fff;border:none;padding:12px 16px;font-size:14px;border-radius:6px;cursor:pointer;box-shadow:0 2px 6px #0003;transition:background-color .2s;z-index:10}.add-btn:hover{background-color:#0056b3}.add-btn-icon{width:25px;height:25px;border-radius:50%;border:none;background:#007bff;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;position:relative;overflow:hidden}.add-btn-icon:focus{outline:none!important}.add-btn-icon:hover{transform:scale(1.1);border:none}.add-btn-icon:active{transform:scale(.95)}.plus-icon{font-size:15px;font-weight:700;line-height:1;transition:transform .2s ease}\n"] }]
-        }], ctorParameters: () => [{ type: SharedService }, { type: DataService }, { type: i1$1.DomSanitizer }, { type: I18nService }], propDecorators: { selectedFileData: [{
+        }], ctorParameters: () => [{ type: SharedService }, { type: DataService }, { type: i1$1.DomSanitizer }], propDecorators: { selectedFileData: [{
                 type: Output
             }], deletedFileData: [{
                 type: Output
@@ -54738,7 +54652,7 @@ class NxtDatatable {
         this.hadleDropDownDependent.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, deps: [{ token: i0.ChangeDetectorRef }, { token: TranslationService }, { token: i0.Renderer2 }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableParamsEmit: "NxtTableParamsEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n            style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && 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=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n                                stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '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\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                  </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell tableHeader 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.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\" [style.width]=\"column.width || '100px'\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\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 {\n                                                    {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                   }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\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\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\">\n                                                                    <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                        <div class=\"fsearch-bar\">\n                                                                            <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                                viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                                xmlns=\"http://www.w3.org/2000/svg\">\n                                                                                <path\n                                                                                    d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                                <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                            </svg>\n                                                                            <input class=\"width-100\" type=\"text\"\n                                                                                placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                        class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                        viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                                        <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path\n                                                                            d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                    </svg>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                            style=\"gap: 5px;\">\n                                                                            <input type=\"checkbox\"\n                                                                                [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                                [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                            <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <!-- Enhanced resize handle -->\n                                            <div class=\"resize-handle\" \n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\"></div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    style=\"padding: 12px !important;\">\n                                    {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-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\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; ellipsis\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\"\n                                        [style.max-width]=\"column.width || '100px'\">\n                                        <div>\n                                            <div>\n                                               <!-- SKS22JUL25 calendar  -->\n                                                <div *ngIf=\"column.type === '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\n                                                <!-- SKS22JUL25 for pick location -->\n                                                <app-pick-location  *ngIf=\"column.type === 'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </app-pick-location>\n\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngIf=\"column.type === 'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(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=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                                fill=\"#6C757D\" />\n                                                        </svg>\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (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.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.question?.isReadOnly\" 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 [allIcons]=\"allIcons\" *ngIf=\"column.type === 'icon'\" [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?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\"></nxt-icon-selector>\n\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngIf=\"column.type === 'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngIf=\"column.type === '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' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\"\n                                                    [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n                                                </nxt-datatable>\n                                                <!-- SKS22JUL25 list -->\n                                                <nxt-search-box  *ngIf=\"column.type === 'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\" column?.question?.question ? ((column?.question?.id+'.question') | nxtCustomTranslate : column.question?.question) : ''\" \n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n                                                </nxt-search-box>\n\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <app-custom-dropdown *ngIf=\"column?.type === 'dropdown' && column.question?.options\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n                                                    placeholder=\"\"\n                                                    [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n                                                    [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </app-custom-dropdown>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <div *ngIf=\"column.type === 'radio' && column.question?.options\" class=\"\">\n                                                    <app-custom-radio [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                        [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n                                                        [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n                                                        [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\"\n                                                        (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                    </app-custom-radio>\n                                                </div>\n\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <app-file-upload *ngIf=\"column.type === 'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </app-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button\n                                                    *ngIf=\"column.type === 'button'\"\n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? '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                                                <!-- <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                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input  *ngIf=\"column.type === undefined || column.type === 'text' || column.type === 'email' || column.type === 'number' || column.type === 'label' || column.type === 'boolean' || column.type === 'richtextarea' || column.type === 'datetime' || column.type === 'date' || column.type === 'time' || column.type === 'textarea'\"\n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName \"\n                                                    [hyperLink]=\"column.hyperLink\"\n                                                    (hyperlinkEmit)=\"onClickHyperlink(column.fieldName,element, column.hyperLink)\"\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?.fontColor\"\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                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\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\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\"\n                                            matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 Render inline buttons up to Size -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"i < actionButtonArray?.size\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | 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=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                        <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | 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\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\"\n                                                class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last\"\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]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentColumns\" class=\"skeleton-cell \"></div>\n\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'\"\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 class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\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=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"tableSaveButton && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (event)=\"pageParams($event)\">\n                </nxt-pagination>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n    aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| 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                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n                    'NO'| nxtCustomTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</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;padding:12px 0 12px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;min-width:50px;padding:2.5px 0 2.5px 12px;border-bottom:solid 1px var(--border-color);max-width:none;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 .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .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}.actionCol .resize-handle{display:none}.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;min-width:0;overflow:hidden;padding-right:8px}.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)}.resize-handle{position:absolute;right:-1px;top:0;bottom:0;width:1px;cursor:col-resize;background:#ccc;z-index:10;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:unset!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;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;left:0!important;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:3px;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:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;max-width:none;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}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #000}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], 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: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { 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"], outputs: ["searchValueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "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", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableFilterArray", "selectedView", "displayedColumns", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableParamsEmit: "NxtTableParamsEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n            style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && 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=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n                                stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '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\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                  </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell tableHeader 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.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\" [style.width]=\"column.width || '100px'\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\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 {\n                                                    {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                   }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\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\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\">\n                                                                    <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                        <div class=\"fsearch-bar\">\n                                                                            <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                                viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                                xmlns=\"http://www.w3.org/2000/svg\">\n                                                                                <path\n                                                                                    d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                                <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                            </svg>\n                                                                            <input class=\"width-100\" type=\"text\"\n                                                                                placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                        class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                        viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                                        <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path\n                                                                            d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                    </svg>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                            style=\"gap: 5px;\">\n                                                                            <input type=\"checkbox\"\n                                                                                [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                                [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                            <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <!-- Enhanced resize handle -->\n                                            <div class=\"resize-handle\" \n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\"></div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    style=\"padding: 12px !important;\">\n                                    {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-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\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; ellipsis\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\"\n                                        [style.max-width]=\"column.width || '100px'\">\n                                        <div>\n                                            <div>\n                                               <!-- SKS22JUL25 calendar  -->\n                                                <div *ngIf=\"column.type === '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\n                                                <!-- SKS22JUL25 for pick location -->\n                                                <app-pick-location  *ngIf=\"column.type === 'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </app-pick-location>\n\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngIf=\"column.type === 'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(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=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                                fill=\"#6C757D\" />\n                                                        </svg>\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (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.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.question?.isReadOnly\" 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 [allIcons]=\"allIcons\" *ngIf=\"column.type === 'icon'\" [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?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\"></nxt-icon-selector>\n\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngIf=\"column.type === 'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngIf=\"column.type === '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' ? element?.editRow && !column.question?.isReadOnly ? '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  *ngIf=\"column.type === 'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" \n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? '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\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <app-custom-dropdown *ngIf=\"column?.type === 'dropdown' && column.question?.options\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n                                                    placeholder=\"\"\n                                                    [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n                                                    [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </app-custom-dropdown>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <div *ngIf=\"column.type === 'radio' && column.question?.options\" class=\"\">\n                                                    <app-custom-radio [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                        [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n                                                        [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n                                                        [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                        (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                    </app-custom-radio>\n                                                </div>\n\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <app-file-upload *ngIf=\"column.type === 'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? '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                                                </app-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button\n                                                    *ngIf=\"column.type === 'button'\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? '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                                                <!-- <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                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input  *ngIf=\"column.type === undefined || column.type === 'text' || column.type === 'email' || column.type === 'number' || column.type === 'label' || column.type === 'boolean' || column.type === 'richtextarea' || column.type === 'datetime' || column.type === 'date' || column.type === 'time' || column.type === 'textarea'\"\n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName \"\n                                                    [hyperLink]=\"column.hyperLink\"\n                                                    (hyperlinkEmit)=\"onClickHyperlink(column.fieldName,element, column.hyperLink)\"\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?.fontColor\"\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                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\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\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\"\n                                            matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 Render inline buttons up to Size -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"i < actionButtonArray?.size\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | 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=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                        <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | 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\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\"\n                                                class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last\"\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]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentColumns\" class=\"skeleton-cell \"></div>\n\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'\"\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 class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\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=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (event)=\"pageParams($event)\">\n                </nxt-pagination>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n    aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| 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                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n                    'NO'| nxtCustomTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</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;padding:12px 0 12px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;min-width:50px;padding:2.5px 0 2.5px 12px;border-bottom:solid 1px var(--border-color);max-width:none;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 .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .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}.actionCol .resize-handle{display:none}.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;min-width:0;overflow:hidden;padding-right:8px}.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)}.resize-handle{position:absolute;right:-1px;top:0;bottom:0;width:1px;cursor:col-resize;background:#ccc;z-index:10;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:unset!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;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;left:0!important;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:3px;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:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;max-width:none;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}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #000}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], 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: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { 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"], outputs: ["searchValueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "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", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableFilterArray", "selectedView", "displayedColumns", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtDatatable, decorators: [{
             type: Component,
@@ -54763,7 +54677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NxtCustomTranslatePipe,
                         QuestionByRowPipe
                         // RowResizerDirective
-                    ], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n            style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && 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=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n                                stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '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\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                  </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell tableHeader 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.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\" [style.width]=\"column.width || '100px'\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\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 {\n                                                    {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                   }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\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\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\">\n                                                                    <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                        <div class=\"fsearch-bar\">\n                                                                            <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                                viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                                xmlns=\"http://www.w3.org/2000/svg\">\n                                                                                <path\n                                                                                    d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                                <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                            </svg>\n                                                                            <input class=\"width-100\" type=\"text\"\n                                                                                placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                        class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                        viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                                        <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path\n                                                                            d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                    </svg>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                            style=\"gap: 5px;\">\n                                                                            <input type=\"checkbox\"\n                                                                                [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                                [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                            <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <!-- Enhanced resize handle -->\n                                            <div class=\"resize-handle\" \n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\"></div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    style=\"padding: 12px !important;\">\n                                    {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-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\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; ellipsis\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\"\n                                        [style.max-width]=\"column.width || '100px'\">\n                                        <div>\n                                            <div>\n                                               <!-- SKS22JUL25 calendar  -->\n                                                <div *ngIf=\"column.type === '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\n                                                <!-- SKS22JUL25 for pick location -->\n                                                <app-pick-location  *ngIf=\"column.type === 'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </app-pick-location>\n\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngIf=\"column.type === 'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(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=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                                fill=\"#6C757D\" />\n                                                        </svg>\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (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.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.question?.isReadOnly\" 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 [allIcons]=\"allIcons\" *ngIf=\"column.type === 'icon'\" [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?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\"></nxt-icon-selector>\n\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngIf=\"column.type === 'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngIf=\"column.type === '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' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\"\n                                                    [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n                                                </nxt-datatable>\n                                                <!-- SKS22JUL25 list -->\n                                                <nxt-search-box  *ngIf=\"column.type === 'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\" column?.question?.question ? ((column?.question?.id+'.question') | nxtCustomTranslate : column.question?.question) : ''\" \n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n                                                </nxt-search-box>\n\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <app-custom-dropdown *ngIf=\"column?.type === 'dropdown' && column.question?.options\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n                                                    placeholder=\"\"\n                                                    [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n                                                    [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </app-custom-dropdown>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <div *ngIf=\"column.type === 'radio' && column.question?.options\" class=\"\">\n                                                    <app-custom-radio [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                        [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n                                                        [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n                                                        [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\"\n                                                        (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                    </app-custom-radio>\n                                                </div>\n\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <app-file-upload *ngIf=\"column.type === 'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </app-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button\n                                                    *ngIf=\"column.type === 'button'\"\n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? '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                                                <!-- <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                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input  *ngIf=\"column.type === undefined || column.type === 'text' || column.type === 'email' || column.type === 'number' || column.type === 'label' || column.type === 'boolean' || column.type === 'richtextarea' || column.type === 'datetime' || column.type === 'date' || column.type === 'time' || column.type === 'textarea'\"\n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"from === 'formBuilder' && element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName \"\n                                                    [hyperLink]=\"column.hyperLink\"\n                                                    (hyperlinkEmit)=\"onClickHyperlink(column.fieldName,element, column.hyperLink)\"\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?.fontColor\"\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                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\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\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\"\n                                            matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 Render inline buttons up to Size -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"i < actionButtonArray?.size\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | 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=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                        <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | 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\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\"\n                                                class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last\"\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]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentColumns\" class=\"skeleton-cell \"></div>\n\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'\"\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 class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\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=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"tableSaveButton && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (event)=\"pageParams($event)\">\n                </nxt-pagination>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n    aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| 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                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n                    'NO'| nxtCustomTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</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;padding:12px 0 12px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;min-width:50px;padding:2.5px 0 2.5px 12px;border-bottom:solid 1px var(--border-color);max-width:none;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 .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .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}.actionCol .resize-handle{display:none}.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;min-width:0;overflow:hidden;padding-right:8px}.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)}.resize-handle{position:absolute;right:-1px;top:0;bottom:0;width:1px;cursor:col-resize;background:#ccc;z-index:10;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:unset!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;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;left:0!important;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:3px;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:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;max-width:none;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}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #000}\n"] }]
+                    ], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n            style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && 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=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n                                stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '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\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                  </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell tableHeader 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.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\" [style.width]=\"column.width || '100px'\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\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 {\n                                                    {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                   }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\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\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\">\n                                                                    <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                        <div class=\"fsearch-bar\">\n                                                                            <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                                viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                                xmlns=\"http://www.w3.org/2000/svg\">\n                                                                                <path\n                                                                                    d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                                <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                            </svg>\n                                                                            <input class=\"width-100\" type=\"text\"\n                                                                                placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                        class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                        viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                                        <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path\n                                                                            d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                    </svg>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                            style=\"gap: 5px;\">\n                                                                            <input type=\"checkbox\"\n                                                                                [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                                [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                            <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <!-- Enhanced resize handle -->\n                                            <div class=\"resize-handle\" \n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\"></div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    style=\"padding: 12px !important;\">\n                                    {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-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\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; ellipsis\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\"\n                                        [style.max-width]=\"column.width || '100px'\">\n                                        <div>\n                                            <div>\n                                               <!-- SKS22JUL25 calendar  -->\n                                                <div *ngIf=\"column.type === '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\n                                                <!-- SKS22JUL25 for pick location -->\n                                                <app-pick-location  *ngIf=\"column.type === 'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </app-pick-location>\n\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngIf=\"column.type === 'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(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=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                                fill=\"#6C757D\" />\n                                                        </svg>\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (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.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.question?.isReadOnly\" 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 [allIcons]=\"allIcons\" *ngIf=\"column.type === 'icon'\" [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?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\"></nxt-icon-selector>\n\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngIf=\"column.type === 'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngIf=\"column.type === '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' ? element?.editRow && !column.question?.isReadOnly ? '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  *ngIf=\"column.type === 'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" \n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? '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\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <app-custom-dropdown *ngIf=\"column?.type === 'dropdown' && column.question?.options\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n                                                    placeholder=\"\"\n                                                    [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n                                                    [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </app-custom-dropdown>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <div *ngIf=\"column.type === 'radio' && column.question?.options\" class=\"\">\n                                                    <app-custom-radio [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                        [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n                                                        [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n                                                        [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                        (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                    </app-custom-radio>\n                                                </div>\n\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <app-file-upload *ngIf=\"column.type === 'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? '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                                                </app-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button\n                                                    *ngIf=\"column.type === 'button'\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? '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                                                <!-- <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                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input  *ngIf=\"column.type === undefined || column.type === 'text' || column.type === 'email' || column.type === 'number' || column.type === 'label' || column.type === 'boolean' || column.type === 'richtextarea' || column.type === 'datetime' || column.type === 'date' || column.type === 'time' || column.type === 'textarea'\"\n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName \"\n                                                    [hyperLink]=\"column.hyperLink\"\n                                                    (hyperlinkEmit)=\"onClickHyperlink(column.fieldName,element, column.hyperLink)\"\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?.fontColor\"\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                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\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\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\"\n                                            matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path\n                                                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 Render inline buttons up to Size -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"i < actionButtonArray?.size\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | 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=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                        <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | 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\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\"\n                                                class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last\"\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]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentColumns\" class=\"skeleton-cell \"></div>\n\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'\"\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 class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\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=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (event)=\"pageParams($event)\">\n                </nxt-pagination>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n    aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| 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                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n                    'NO'| nxtCustomTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</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;padding:12px 0 12px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;min-width:50px;padding:2.5px 0 2.5px 12px;border-bottom:solid 1px var(--border-color);max-width:none;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 .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .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}.actionCol .resize-handle{display:none}.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;min-width:0;overflow:hidden;padding-right:8px}.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)}.resize-handle{position:absolute;right:-1px;top:0;bottom:0;width:1px;cursor:col-resize;background:#ccc;z-index:10;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:unset!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;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;left:0!important;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:3px;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:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;max-width:none;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}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #000}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TranslationService }, { type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
                 type: Input
             }], tableFilterData: [{
@@ -54936,7 +54850,6 @@ class QuestionnaireComponent {
     sanitizer;
     _formBuilder;
     deviceService;
-    i18nService;
     qbId;
     insuranceStartDate;
     serv;
@@ -55130,7 +55043,7 @@ class QuestionnaireComponent {
     allInputValues = []; // HA 02FEB24 To store all the input values
     constructor(sfService, dataService, changeService, sharedService, route, sanitizer, _formBuilder, 
     //private dbService: NgxIndexedDBService,
-    deviceService, el, i18nService) {
+    deviceService, el) {
         this.sfService = sfService;
         this.dataService = dataService;
         this.changeService = changeService;
@@ -55139,7 +55052,6 @@ class QuestionnaireComponent {
         this.sanitizer = sanitizer;
         this._formBuilder = _formBuilder;
         this.deviceService = deviceService;
-        this.i18nService = i18nService;
         // VD 10Aug24-spinner changes
         this.spinnerType = "ball-spin-clockwise-fade";
     }
@@ -57092,16 +57004,15 @@ class QuestionnaireComponent {
     getValue(item) {
         return Object.values(item)[0];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: SharedService }, { token: i1$2.ActivatedRoute }, { token: i1$1.DomSanitizer }, { token: i5.UntypedFormBuilder }, { token: i8.DeviceDetectorService }, { token: i0.ElementRef }, { token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionnaireComponent, isStandalone: true, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api", isEdit: "isEdit", direction: "direction" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, usesOnChanges: true, ngImport: i0, template: "<!-- custom loader -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" >\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\n    </button>\n  </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\" [dir]=\"direction\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.title\">\n    <h1>{{ questionItem?.title }}</h1>\n    <div>{{ questionItem?.subTitle }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div>\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n      <div class=\"nxt-largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.groupName }}\n        </h3>\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Question Handling -->\n    <!-- VD 10Aug24- question no -->\n  <div>\n    <div *ngIf=\"questionItem.questionText && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n      <span>{{questionItem?.questionNumber}}.</span>\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n       {{(questionItem.id+'.questionText') | nxtCustomTranslate : questionItem?.questionText}}\n      </p>\n    </div>\n    <!-- Title -->\n    <!-- <div *ngIf=\"questionItem.isTitle\">\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n        {{ questionItem?.questionText }}\n      </div>\n    </div> -->\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{ questionItem?.questionText }}\n        </h3>\n      </div>\n    </div> -->\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n  </div>\n\n  <!-- Additional Info -->\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\n    <div\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\n    <div class=\"info-alert ques-alert1\">\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n    </div>\n  </div>\n\n  <!-- Dropdown-->\n  <div *ngIf=\"dropdownFlag\" >\n    <div class=\"nxt-dis-flex\">\n      <select class=\"nxtdropdown\"\n        [ngClass]=\"{\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n          'custom-select': !qbItem?.progressBar\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n          {{ opt.value }}\n        </option>\n        <!-- HA 20DEC23 For Translation -->\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\n      </select>\n    </div>\n  </div>\n\n  <!--VD Radio update -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n    <div class=\"nxt-custom-radio-container\">\n      <div *ngFor=\"let opt of questionItem.options\" \n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n        <input\n          type=\"radio\"\n          [id]=\"opt.value\"\n          [(ngModel)]=\"inpValue\"\n          name=\"inpValue\"\n          [value]=\"opt.value\"\n          (change)=\"optionChange(opt.value)\"\n        />\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n      </div>\n    </div>\n\n    <!-- <div class=\"nxt-dis-flex\">\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n        <label class=\"nxt-radiocontainer container myt-font4\">\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n            (change)=\"optionChange(opt.value)\" />\n          {{ opt.value }}\n        </label>\n      </div>\n    </div> -->\n  </div>  \n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n      {{ questionItem?.errorMessage }}\n    </div>\n    <div class=\"nxt-checkbox-container\">\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n        <label class=\"nxt-container1\">\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\">\n    <!-- HA 31-JAN-24 To reduce the margin -->\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" >\n    <div>\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0 && taFocusOut\n            ? '#87be1c'\n            : ''\n        }}\" (focusout)=\"taFocusOut = true\"\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n    </div>\n  </div>\n\n  <!-- CC Number Format -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n  <!-- END-->\n\n  <!-- AlphaNumeric -->\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n    <div style=\"position:relative;\">\n      <!-- HA 20DEC23 For Translation -->\n      <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n    </div>\n  </div>\n\n  <!-- Email -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n\n  <!-- DateTime -->\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\n    <!-- Error Handling -->\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n    <!-- Date -->\n    <div *ngIf=\"dateFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n          <!-- HA 20DEC23 For Translation -->\n          <!-- HA 02FEB24 Additional param to update the question -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Time -->\n    <div *ngIf=\"timeFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                           dateandTime: !qbItem?.progressBar}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n            (focus)=\"clearError()\">\n            <option value=\"\">HH</option>\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n              {{ hour }}\n            </option>\n          </select>\n          <span class=\"colon\"> : </span>\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n            (focus)=\"clearError()\">\n            <option value=\"\">MM</option>\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n              {{ minute }}\n            </option>\n          </select>\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\n          </div>\n        </div>\n      </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Attachment / File -->\n  <div *ngIf=\"fileFlag\">\n    <div *ngIf=\"!qbItem.progressBar\">\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n        <label class=\"picture-upload\" for=\"file-upload\">\n          <span class=\"picture-upload-child\">\n          </span>\n        </label>\n      </div>\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.type === 'File' &&\n        !qbItem?.progressBar\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.progressBar\">\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\n      </div>\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n      \n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"f-Name\" *ngIf=\" questionItem?.style?.showLabel !== false\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\n        <label class=\"file-label \">\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n          <!-- HA 20DEC23 For Translation -->\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n            class=\"file-upload-btn\">\n        </label>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n            <span *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n            <div *ngIf=\"ques.type === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n                <div class=\"dateandtime\">\n                  <!-- HA 20DEC23 For Translation -->\n                  <!-- HA 02FEB24 Additional param to update the question -->\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"ques.type === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n                <div class=\"dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                                  dateandTime: !qbItem?.progressBar}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">HH</option>\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n                      {{ hour }}\n                    </option>\n                  </select>\n                  <span class=\"colon\"> : </span>\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">MM</option>\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n                      {{ minute }}\n                    </option>\n                  </select>\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n                      <option value=\"AM\">AM</option>\n                      <option value=\"PM\">PM</option>\n                    </select>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n         \n            <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n            <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n            [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n            [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n            [value]=\"ques.input\"\n            [question]=\"ques\"\n            [labelFont]=\"ques.font\"\n            [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n            [labelColor]=\"ques.fontColor\"\n            [labelSize]=\"ques.fontSize\"\n            [inputValueSize]=\"ques.fontSize\"\n            [labelWeight]=\"ques.fontWeight\"\n            [inputWeight]=\"ques.fontWeight\"\n            [showLabel]=\"ques.style?.showLabel\"\n            inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n            [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n            [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n            [inputId]=\"ques.trackingId\"\n            [errorMessages]=\"{ required: 'This field is required' }\"\n            [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n            (inputValue)=\"childEventCapture($event,ques)\"\n            >\n        </nxt-input>\n          <div *ngIf=\"ques.type === 'Location'\">\n            <!-- for pick location -->\n            <!-- HA10012024 Added Api key as input -->\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n          </div>\n\n          <!-- Email -->\n          <div *ngIf=\"ques.type === 'Email'\">\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n          </div>\n\n          <div *ngIf=\"ques.type === 'File'\">\n            <div *ngIf=\"!qbItem.progressBar\">\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n                <span class=\"picture-upload-child\">\n                </span>\n              </label>\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n            </div>\n\n            <ul *ngIf=\"\n                attachments?.length > 0 &&\n                ques.type === 'File' &&\n                !qbItem.progressBar\n              \" class=\"attach-ulist col-md-12\">\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n                {{ attachment.attachmentName\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n              </li>\n            </ul>\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\n              </div>\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.question }}</span>\n                <label class=\"file-label \">\n                  <span style=\"color: #c5281c;text-decoration:underline\">\n                    {{'attach' | i18n:i18nService.currentLanguage}}\n                  </span>\n                  <!-- HA 20DEC23 For Translation -->\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n                    class=\"file-upload-btn\">\n                </label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Table -->\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n            <!-- SKS13MAR25 nxt table change -->\n            <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n                [question]=\"ques\"\n                from = \"formBuilder\"\n                (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n                [tableConfig]=\"ques.tableConfig\"\n                tableId = \"\"\n                direction = \"ltr\"\n                tableWidth = \"auto\"\n                >\n            </nxt-datatable>\n          </div>\n\n          <!-- SKS25MAR25 Image -->\n          <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n            <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\n          </div>\n\n          <!-- Dropdown -->\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\n            <!-- for common dropdown -->\n            <!-- HA 20DEC23 For Translation -->\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\n                    [options]=\"ques.options\"\n                    [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.Name\"\n                    [selectedValue]=\"ques.input\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques?.errorMessage\"\n                    [error]=\"ques?.error\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n            </app-custom-dropdown>\n          </div>          \n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!--List start-->\n  <div *ngIf=\"listFlag\">\n    <div class=\"form-group\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n          <div>\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\n          </div>\n          <div *ngIf=\"ques.type === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n             textBox: !qbItem.progressBar\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n          </div>\n        </div>\n        <div class=\"\" *ngIf=\"addFlag\">\n          <!-- HA 20DEC23 For Translation -->\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\">{{'add' | i18n:i18nService.currentLanguage}}</button>\n         </div>\n      </div>\n    </div>\n  </div>\n  <!--List End-->\n\n  <!-- Actions -->\n  <!-- VD button condition removed-->\n  <div class=\"flexer\">\n    <!-- Backward / Back -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n     <!--VD disabled -->\n    <div class=\"backbutton\" \n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-left-bt': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.back }}\n        </button>\n    </div>\n\n    <!-- Forward / Next -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div  *ngIf=\"qbItem.next\" >\n      <div class=\"nxtbutton\">\n         <!--VD disabled -->\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-rusty': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.next }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n  <h2>{{this.qbItem.summaryText}}</h2>\n  <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.progressBar\n               }\">\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\n           <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n            </div>\n            <!-- VD Question No added -->\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"nxt-answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                  {{ qa.ansValue }}\n                </div>\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\n                <div *ngIf=\"qa.qTyp == 'Book'\">\n                  <div *ngFor=\"let val of qa.myVal\">\n                    <p *ngIf=\"val.style?.showLabel !== false\">{{ val.questionText }}:<span>{{ val.input }}</span></p>\n                  </div>\n                </div>\n                <!-- HA 02FEB24 Displaying the value for direct question -->\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'  && qa.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : qa?.questionText}} <span></span>{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n\n\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.progressBar\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.summaryText }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div class=\"summary-groupText myt-font2\">\n      <!-- <p>Informe de da\u00F1o</p> -->\n    </div>\n    <div *ngFor=\"let qa of summary\" >\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div class=\"summary\">\n            <!-- <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div> -->\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"nxt-answer\">\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                {{ qa.ansValue }}\n              </div>\n              <div *ngIf=\"qa.qTyp != 'File'\">\n                {{ qa.ansValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.cancel }}\n        </button>\n      </div>\n    </div>\n  </div> -->\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.submit }}\n      </button>\n    </div>\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.edit }}\n      </button>\n    </div> -->\n  </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "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", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: SharedService }, { token: i1$2.ActivatedRoute }, { token: i1$1.DomSanitizer }, { token: i5.UntypedFormBuilder }, { token: i8.DeviceDetectorService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionnaireComponent, isStandalone: true, selector: "lib-questionnaire", inputs: { qbId: "qbId", insuranceStartDate: "insuranceStartDate", serv: "serv", tkn: "tkn", api: "api", isEdit: "isEdit", direction: "direction" }, outputs: { handleEvent: "handleEvent", handlePage: "handlePage", handleQuestion: "handleQuestion", handleBook: "handleBook", handleSubmit: "handleSubmit" }, usesOnChanges: true, ngImport: i0, template: "<!-- custom loader -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" >\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\n    </button>\n  </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\" [dir]=\"direction\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.title\">\n    <h1>{{ questionItem?.title }}</h1>\n    <div>{{ questionItem?.subTitle }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div>\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n      <div class=\"nxt-largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.groupName }}\n        </h3>\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Question Handling -->\n    <!-- VD 10Aug24- question no -->\n  <div>\n    <div *ngIf=\"questionItem.questionText && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n      <span>{{questionItem?.questionNumber}}.</span>\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n       {{(questionItem.id+'.questionText') | nxtCustomTranslate : questionItem?.questionText}}\n      </p>\n    </div>\n    <!-- Title -->\n    <!-- <div *ngIf=\"questionItem.isTitle\">\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n        {{ questionItem?.questionText }}\n      </div>\n    </div> -->\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{ questionItem?.questionText }}\n        </h3>\n      </div>\n    </div> -->\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n  </div>\n\n  <!-- Additional Info -->\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\n    <div\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\n    <div class=\"info-alert ques-alert1\">\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n    </div>\n  </div>\n\n  <!-- Dropdown-->\n  <div *ngIf=\"dropdownFlag\" >\n    <div class=\"nxt-dis-flex\">\n      <select class=\"nxtdropdown\"\n        [ngClass]=\"{\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n          'custom-select': !qbItem?.progressBar\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n          {{ opt.value }}\n        </option>\n        <!-- HA 20DEC23 For Translation -->\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | nxtCustomTranslate: 'pleaseMakeChoice'}}</option>\n      </select>\n    </div>\n  </div>\n\n  <!--VD Radio update -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n    <div class=\"nxt-custom-radio-container\">\n      <div *ngFor=\"let opt of questionItem.options\" \n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n        <input\n          type=\"radio\"\n          [id]=\"opt.value\"\n          [(ngModel)]=\"inpValue\"\n          name=\"inpValue\"\n          [value]=\"opt.value\"\n          (change)=\"optionChange(opt.value)\"\n        />\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n      </div>\n    </div>\n\n    <!-- <div class=\"nxt-dis-flex\">\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n        <label class=\"nxt-radiocontainer container myt-font4\">\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n            (change)=\"optionChange(opt.value)\" />\n          {{ opt.value }}\n        </label>\n      </div>\n    </div> -->\n  </div>  \n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n      {{ questionItem?.errorMessage }}\n    </div>\n    <div class=\"nxt-checkbox-container\">\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n        <label class=\"nxt-container1\">\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\">\n    <!-- HA 31-JAN-24 To reduce the margin -->\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" >\n    <div>\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0 && taFocusOut\n            ? '#87be1c'\n            : ''\n        }}\" (focusout)=\"taFocusOut = true\"\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n    </div>\n  </div>\n\n  <!-- CC Number Format -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n  <!-- END-->\n\n  <!-- AlphaNumeric -->\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n    <div style=\"position:relative;\">\n      <!-- HA 20DEC23 For Translation -->\n      <input type=text placeholder=\"{{'zeroOfZero' | nxtCustomTranslate: 'zeroOfZero'}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n    </div>\n  </div>\n\n  <!-- Email -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n\n  <!-- DateTime -->\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\n    <!-- Error Handling -->\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n    <!-- Date -->\n    <div *ngIf=\"dateFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n          <!-- HA 20DEC23 For Translation -->\n          <!-- HA 02FEB24 Additional param to update the question -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Time -->\n    <div *ngIf=\"timeFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                           dateandTime: !qbItem?.progressBar}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n            (focus)=\"clearError()\">\n            <option value=\"\">HH</option>\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n              {{ hour }}\n            </option>\n          </select>\n          <span class=\"colon\"> : </span>\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n            (focus)=\"clearError()\">\n            <option value=\"\">MM</option>\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n              {{ minute }}\n            </option>\n          </select>\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\n          </div>\n        </div>\n      </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Attachment / File -->\n  <div *ngIf=\"fileFlag\">\n    <div *ngIf=\"!qbItem.progressBar\">\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n        <label class=\"picture-upload\" for=\"file-upload\">\n          <span class=\"picture-upload-child\">\n          </span>\n        </label>\n      </div>\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.type === 'File' &&\n        !qbItem?.progressBar\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.progressBar\">\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\n      </div>\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n      \n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"f-Name\" *ngIf=\" questionItem?.style?.showLabel !== false\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\n        <label class=\"file-label \">\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n          <!-- HA 20DEC23 For Translation -->\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n            class=\"file-upload-btn\">\n        </label>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n            <span *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n            <div *ngIf=\"ques.type === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n                <div class=\"dateandtime\">\n                  <!-- HA 20DEC23 For Translation -->\n                  <!-- HA 02FEB24 Additional param to update the question -->\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"ques.type === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n                <div class=\"dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                                  dateandTime: !qbItem?.progressBar}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">HH</option>\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n                      {{ hour }}\n                    </option>\n                  </select>\n                  <span class=\"colon\"> : </span>\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">MM</option>\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n                      {{ minute }}\n                    </option>\n                  </select>\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n                      <option value=\"AM\">AM</option>\n                      <option value=\"PM\">PM</option>\n                    </select>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n         \n            <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n            <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n            [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n            [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n            [value]=\"ques.input\"\n            [question]=\"ques\"\n            [labelFont]=\"ques.font\"\n            [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n            [labelColor]=\"ques.fontColor\"\n            [labelSize]=\"ques.fontSize\"\n            [inputValueSize]=\"ques.fontSize\"\n            [labelWeight]=\"ques.fontWeight\"\n            [inputWeight]=\"ques.fontWeight\"\n            [showLabel]=\"ques.style?.showLabel\"\n            inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n            [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n            [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n            [inputId]=\"ques.trackingId\"\n            [errorMessages]=\"{ required: 'This field is required' }\"\n            [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n            (inputValue)=\"childEventCapture($event,ques)\"\n            >\n        </nxt-input>\n          <div *ngIf=\"ques.type === 'Location'\">\n            <!-- for pick location -->\n            <!-- HA10012024 Added Api key as input -->\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n          </div>\n\n          <!-- Email -->\n          <div *ngIf=\"ques.type === 'Email'\">\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n          </div>\n\n          <div *ngIf=\"ques.type === 'File'\">\n            <div *ngIf=\"!qbItem.progressBar\">\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n                <span class=\"picture-upload-child\">\n                </span>\n              </label>\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n            </div>\n\n            <ul *ngIf=\"\n                attachments?.length > 0 &&\n                ques.type === 'File' &&\n                !qbItem.progressBar\n              \" class=\"attach-ulist col-md-12\">\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n                {{ attachment.attachmentName\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n              </li>\n            </ul>\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\n              </div>\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.question }}</span>\n                <label class=\"file-label \">\n                  <span style=\"color: #c5281c;text-decoration:underline\">\n                    {{'attach' | nxtCustomTranslate : 'attach'}}\n                  </span>\n                  <!-- HA 20DEC23 For Translation -->\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n                    class=\"file-upload-btn\">\n                </label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Table -->\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n            <!-- SKS13MAR25 nxt table change -->\n            <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n                [question]=\"ques\"\n                from = \"formBuilder\"\n                (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n                [tableConfig]=\"ques.tableConfig\"\n                tableId = \"\"\n                direction = \"ltr\"\n                tableWidth = \"auto\"\n                >\n            </nxt-datatable>\n          </div>\n\n          <!-- SKS25MAR25 Image -->\n          <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n            <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\n          </div>\n\n          <!-- Dropdown -->\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\n            <!-- for common dropdown -->\n            <!-- HA 20DEC23 For Translation -->\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\n                    [options]=\"ques.options\"\n                    [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.Name\"\n                    [selectedValue]=\"ques.input\"\n                    placeholder=\"---{{'select' | nxtCustomTranslate : 'select'}}---\"\n                    [errorMessage]=\"ques?.errorMessage\"\n                    [error]=\"ques?.error\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n            </app-custom-dropdown>\n          </div>          \n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!--List start-->\n  <div *ngIf=\"listFlag\">\n    <div class=\"form-group\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n          <div>\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\n          </div>\n          <div *ngIf=\"ques.type === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n             textBox: !qbItem.progressBar\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n          </div>\n        </div>\n        <div class=\"\" *ngIf=\"addFlag\">\n          <!-- HA 20DEC23 For Translation -->\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\">{{'add' | nxtCustomTranslate : 'add'}}</button>\n         </div>\n      </div>\n    </div>\n  </div>\n  <!--List End-->\n\n  <!-- Actions -->\n  <!-- VD button condition removed-->\n  <div class=\"flexer\">\n    <!-- Backward / Back -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n     <!--VD disabled -->\n    <div class=\"backbutton\" \n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-left-bt': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.back }}\n        </button>\n    </div>\n\n    <!-- Forward / Next -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div  *ngIf=\"qbItem.next\" >\n      <div class=\"nxtbutton\">\n         <!--VD disabled -->\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-rusty': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.next }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n  <h2>{{this.qbItem.summaryText}}</h2>\n  <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.progressBar\n               }\">\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\n           <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n            </div>\n            <!-- VD Question No added -->\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"nxt-answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                  {{ qa.ansValue }}\n                </div>\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\n                <div *ngIf=\"qa.qTyp == 'Book'\">\n                  <div *ngFor=\"let val of qa.myVal\">\n                    <p *ngIf=\"val.style?.showLabel !== false\">{{ val.questionText }}:<span>{{ val.input }}</span></p>\n                  </div>\n                </div>\n                <!-- HA 02FEB24 Displaying the value for direct question -->\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'  && qa.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : qa?.questionText}} <span></span>{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n\n\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.progressBar\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.summaryText }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div class=\"summary-groupText myt-font2\">\n      <!-- <p>Informe de da\u00F1o</p> -->\n    </div>\n    <div *ngFor=\"let qa of summary\" >\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div class=\"summary\">\n            <!-- <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div> -->\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"nxt-answer\">\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                {{ qa.ansValue }}\n              </div>\n              <div *ngIf=\"qa.qTyp != 'File'\">\n                {{ qa.ansValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.cancel }}\n        </button>\n      </div>\n    </div>\n  </div> -->\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.submit }}\n      </button>\n    </div>\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.edit }}\n      </button>\n    </div> -->\n  </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "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", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionnaireComponent, decorators: [{
             type: Component,
             args: [{ selector: "lib-questionnaire", standalone: true, imports: [
-                        CommonModule, NxtInput,
-                        I18nPipe, FormsModule, CustomDropdownComponent, NxtDatatable, PickLocationComponent, NxtCustomTranslatePipe
-                    ], encapsulation: ViewEncapsulation.None, template: "<!-- custom loader -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" >\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\n    </button>\n  </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\" [dir]=\"direction\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.title\">\n    <h1>{{ questionItem?.title }}</h1>\n    <div>{{ questionItem?.subTitle }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div>\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n      <div class=\"nxt-largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.groupName }}\n        </h3>\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Question Handling -->\n    <!-- VD 10Aug24- question no -->\n  <div>\n    <div *ngIf=\"questionItem.questionText && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n      <span>{{questionItem?.questionNumber}}.</span>\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n       {{(questionItem.id+'.questionText') | nxtCustomTranslate : questionItem?.questionText}}\n      </p>\n    </div>\n    <!-- Title -->\n    <!-- <div *ngIf=\"questionItem.isTitle\">\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n        {{ questionItem?.questionText }}\n      </div>\n    </div> -->\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{ questionItem?.questionText }}\n        </h3>\n      </div>\n    </div> -->\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n  </div>\n\n  <!-- Additional Info -->\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\n    <div\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\n    <div class=\"info-alert ques-alert1\">\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n    </div>\n  </div>\n\n  <!-- Dropdown-->\n  <div *ngIf=\"dropdownFlag\" >\n    <div class=\"nxt-dis-flex\">\n      <select class=\"nxtdropdown\"\n        [ngClass]=\"{\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n          'custom-select': !qbItem?.progressBar\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n          {{ opt.value }}\n        </option>\n        <!-- HA 20DEC23 For Translation -->\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | i18n:i18nService.currentLanguage}}</option>\n      </select>\n    </div>\n  </div>\n\n  <!--VD Radio update -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n    <div class=\"nxt-custom-radio-container\">\n      <div *ngFor=\"let opt of questionItem.options\" \n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n        <input\n          type=\"radio\"\n          [id]=\"opt.value\"\n          [(ngModel)]=\"inpValue\"\n          name=\"inpValue\"\n          [value]=\"opt.value\"\n          (change)=\"optionChange(opt.value)\"\n        />\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n      </div>\n    </div>\n\n    <!-- <div class=\"nxt-dis-flex\">\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n        <label class=\"nxt-radiocontainer container myt-font4\">\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n            (change)=\"optionChange(opt.value)\" />\n          {{ opt.value }}\n        </label>\n      </div>\n    </div> -->\n  </div>  \n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n      {{ questionItem?.errorMessage }}\n    </div>\n    <div class=\"nxt-checkbox-container\">\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n        <label class=\"nxt-container1\">\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\">\n    <!-- HA 31-JAN-24 To reduce the margin -->\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" >\n    <div>\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0 && taFocusOut\n            ? '#87be1c'\n            : ''\n        }}\" (focusout)=\"taFocusOut = true\"\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n    </div>\n  </div>\n\n  <!-- CC Number Format -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n  <!-- END-->\n\n  <!-- AlphaNumeric -->\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n    <div style=\"position:relative;\">\n      <!-- HA 20DEC23 For Translation -->\n      <input type=text placeholder=\"{{'zeroOfZero' | i18n:i18nService.currentLanguage}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n    </div>\n  </div>\n\n  <!-- Email -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n\n  <!-- DateTime -->\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\n    <!-- Error Handling -->\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n    <!-- Date -->\n    <div *ngIf=\"dateFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n          <!-- HA 20DEC23 For Translation -->\n          <!-- HA 02FEB24 Additional param to update the question -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Time -->\n    <div *ngIf=\"timeFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                           dateandTime: !qbItem?.progressBar}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n            (focus)=\"clearError()\">\n            <option value=\"\">HH</option>\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n              {{ hour }}\n            </option>\n          </select>\n          <span class=\"colon\"> : </span>\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n            (focus)=\"clearError()\">\n            <option value=\"\">MM</option>\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n              {{ minute }}\n            </option>\n          </select>\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\n          </div>\n        </div>\n      </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Attachment / File -->\n  <div *ngIf=\"fileFlag\">\n    <div *ngIf=\"!qbItem.progressBar\">\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n        <label class=\"picture-upload\" for=\"file-upload\">\n          <span class=\"picture-upload-child\">\n          </span>\n        </label>\n      </div>\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.type === 'File' &&\n        !qbItem?.progressBar\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.progressBar\">\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\n      </div>\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n      \n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"f-Name\" *ngIf=\" questionItem?.style?.showLabel !== false\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\n        <label class=\"file-label \">\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n          <!-- HA 20DEC23 For Translation -->\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n            class=\"file-upload-btn\">\n        </label>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n            <span *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n            <div *ngIf=\"ques.type === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n                <div class=\"dateandtime\">\n                  <!-- HA 20DEC23 For Translation -->\n                  <!-- HA 02FEB24 Additional param to update the question -->\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"ques.type === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n                <div class=\"dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                                  dateandTime: !qbItem?.progressBar}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">HH</option>\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n                      {{ hour }}\n                    </option>\n                  </select>\n                  <span class=\"colon\"> : </span>\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">MM</option>\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n                      {{ minute }}\n                    </option>\n                  </select>\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n                      <option value=\"AM\">AM</option>\n                      <option value=\"PM\">PM</option>\n                    </select>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n         \n            <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n            <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n            [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n            [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n            [value]=\"ques.input\"\n            [question]=\"ques\"\n            [labelFont]=\"ques.font\"\n            [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n            [labelColor]=\"ques.fontColor\"\n            [labelSize]=\"ques.fontSize\"\n            [inputValueSize]=\"ques.fontSize\"\n            [labelWeight]=\"ques.fontWeight\"\n            [inputWeight]=\"ques.fontWeight\"\n            [showLabel]=\"ques.style?.showLabel\"\n            inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n            [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n            [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n            [inputId]=\"ques.trackingId\"\n            [errorMessages]=\"{ required: 'This field is required' }\"\n            [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n            (inputValue)=\"childEventCapture($event,ques)\"\n            >\n        </nxt-input>\n          <div *ngIf=\"ques.type === 'Location'\">\n            <!-- for pick location -->\n            <!-- HA10012024 Added Api key as input -->\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n          </div>\n\n          <!-- Email -->\n          <div *ngIf=\"ques.type === 'Email'\">\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n          </div>\n\n          <div *ngIf=\"ques.type === 'File'\">\n            <div *ngIf=\"!qbItem.progressBar\">\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n                <span class=\"picture-upload-child\">\n                </span>\n              </label>\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n            </div>\n\n            <ul *ngIf=\"\n                attachments?.length > 0 &&\n                ques.type === 'File' &&\n                !qbItem.progressBar\n              \" class=\"attach-ulist col-md-12\">\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n                {{ attachment.attachmentName\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n              </li>\n            </ul>\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\n              </div>\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.question }}</span>\n                <label class=\"file-label \">\n                  <span style=\"color: #c5281c;text-decoration:underline\">\n                    {{'attach' | i18n:i18nService.currentLanguage}}\n                  </span>\n                  <!-- HA 20DEC23 For Translation -->\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | i18n:i18nService.currentLanguage}}\" multiple\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n                    class=\"file-upload-btn\">\n                </label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Table -->\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n            <!-- SKS13MAR25 nxt table change -->\n            <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n                [question]=\"ques\"\n                from = \"formBuilder\"\n                (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n                [tableConfig]=\"ques.tableConfig\"\n                tableId = \"\"\n                direction = \"ltr\"\n                tableWidth = \"auto\"\n                >\n            </nxt-datatable>\n          </div>\n\n          <!-- SKS25MAR25 Image -->\n          <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n            <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\n          </div>\n\n          <!-- Dropdown -->\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\n            <!-- for common dropdown -->\n            <!-- HA 20DEC23 For Translation -->\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\n                    [options]=\"ques.options\"\n                    [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.Name\"\n                    [selectedValue]=\"ques.input\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques?.errorMessage\"\n                    [error]=\"ques?.error\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n            </app-custom-dropdown>\n          </div>          \n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!--List start-->\n  <div *ngIf=\"listFlag\">\n    <div class=\"form-group\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n          <div>\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\n          </div>\n          <div *ngIf=\"ques.type === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n             textBox: !qbItem.progressBar\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n          </div>\n        </div>\n        <div class=\"\" *ngIf=\"addFlag\">\n          <!-- HA 20DEC23 For Translation -->\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\">{{'add' | i18n:i18nService.currentLanguage}}</button>\n         </div>\n      </div>\n    </div>\n  </div>\n  <!--List End-->\n\n  <!-- Actions -->\n  <!-- VD button condition removed-->\n  <div class=\"flexer\">\n    <!-- Backward / Back -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n     <!--VD disabled -->\n    <div class=\"backbutton\" \n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-left-bt': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.back }}\n        </button>\n    </div>\n\n    <!-- Forward / Next -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div  *ngIf=\"qbItem.next\" >\n      <div class=\"nxtbutton\">\n         <!--VD disabled -->\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-rusty': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.next }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n  <h2>{{this.qbItem.summaryText}}</h2>\n  <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.progressBar\n               }\">\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\n           <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n            </div>\n            <!-- VD Question No added -->\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"nxt-answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                  {{ qa.ansValue }}\n                </div>\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\n                <div *ngIf=\"qa.qTyp == 'Book'\">\n                  <div *ngFor=\"let val of qa.myVal\">\n                    <p *ngIf=\"val.style?.showLabel !== false\">{{ val.questionText }}:<span>{{ val.input }}</span></p>\n                  </div>\n                </div>\n                <!-- HA 02FEB24 Displaying the value for direct question -->\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'  && qa.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : qa?.questionText}} <span></span>{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n\n\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.progressBar\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.summaryText }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div class=\"summary-groupText myt-font2\">\n      <!-- <p>Informe de da\u00F1o</p> -->\n    </div>\n    <div *ngFor=\"let qa of summary\" >\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div class=\"summary\">\n            <!-- <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div> -->\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"nxt-answer\">\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                {{ qa.ansValue }}\n              </div>\n              <div *ngIf=\"qa.qTyp != 'File'\">\n                {{ qa.ansValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.cancel }}\n        </button>\n      </div>\n    </div>\n  </div> -->\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.submit }}\n      </button>\n    </div>\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.edit }}\n      </button>\n    </div> -->\n  </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"] }]
-        }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: SharedService }, { type: i1$2.ActivatedRoute }, { type: i1$1.DomSanitizer }, { type: i5.UntypedFormBuilder }, { type: i8.DeviceDetectorService }, { type: i0.ElementRef }, { type: I18nService }], propDecorators: { qbId: [{
+                        CommonModule, NxtInput, FormsModule, CustomDropdownComponent, NxtDatatable, PickLocationComponent, NxtCustomTranslatePipe
+                    ], encapsulation: ViewEncapsulation.None, template: "<!-- custom loader -->\n<!-- Back Processing -->\n<!-- <div *ngIf=\"backicon == false\" >\n  <div class=\"backicon\" >\n    <button (click)=\"handleBackClick()\" [class]=\" abItem?.status == 'Completed' ? 'summary-volver':'app-back1'\">\n    <img class=\"icon-arrow-back\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-arrow-back.png\" alt=\"Scroll down\"> {{ qbItem?.back }}\n    </button>\n  </div>\n</div> -->\n\n<!-- Question Hanlding -->\n<!-- VD removed unwanted condition -->\n<!-- RS 09DEC24 Changed keys-->\n<div *ngIf=\"questionItem\" class=\"questiondiv1 padd-bottom\" [dir]=\"direction\">\n  <!-- Progress Bar & Title -->\n  <div *ngIf=\"questionItem.title\">\n    <h1>{{ questionItem?.title }}</h1>\n    <div>{{ questionItem?.subTitle }}</div>\n  </div>\n\n  <!-- Progress & Grouping -->\n  <div>\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- Show the Group/Module related to the Progress -->\n    <div *ngIf=\"questionItem.groupName && qbItem.progressBar\"\n        [ngClass]=\"{ questionalign: !qbItem?.progressBar }\">\n      <div class=\"nxt-largeTitle\">\n        <h3 class=\"myt-font6 myt-text3\">\n          {{ questionItem?.groupName }}\n        </h3>\n        <div *ngIf=\"questionItem.subText != '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font5 myt-text1\">{{questionItem?.subText}}</div>\n        <div *ngIf=\"questionItem.subText === '\u00BFEn qu\u00E9 pa\u00EDs ocurri\u00F3?'\" class=\"myt-font10 myt-text2\">{{questionItem?.subText}}</div>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Question Handling -->\n    <!-- VD 10Aug24- question no -->\n  <div>\n    <div *ngIf=\"questionItem.questionText && questionItem.style?.showLabel !== false\" style=\"display: flex;\">\n      <span>{{questionItem?.questionNumber}}.</span>\n      <p class=\"nxt-label\" [innerHTML]=\"getText(questionItem?.questionText)\">\n       {{(questionItem.id+'.questionText') | nxtCustomTranslate : questionItem?.questionText}}\n      </p>\n    </div>\n    <!-- Title -->\n    <!-- <div *ngIf=\"questionItem.isTitle\">\n      <div *ngIf=\"questionItem.type != 'Book' && questionItem.questionNumber!='6' && questionItem.questionNumber!='9'\"> \n        <h3 class=\"questionalign  myt-font3 myt-align myt-text4\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n    <!-- HA 31-JAN-24 Removed the unwanted styling class -->\n    <!-- <div *ngIf=\"!questionItem.isTitle\" [class]=\"qbItem.isShengel ? 'header-style' : 'question-f-size'\">\n      <div [innerHTML]=\"getText(questionItem?.questionText)\" >\n        {{ questionItem?.questionText }}\n      </div>\n    </div> -->\n\n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'Book'\">\n      <div *ngIf=\"questionItem.questionNumber=='6'\">\n        <h3 class=\"myt-321\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{ questionItem?.questionText }}\n        </h3>\n      </div>\n    </div> -->\n    \n    <!-- This should be removed with Custom Styling - MR - 11AUG23 -->\n    <!-- <div *ngIf=\"questionItem.type == 'File' \">\n      <div *ngIf=\"questionItem.questionNumber=='9'\">\n        <h3 class=\"myt-345\" [innerHTML]=\"getText(questionItem?.questionText)\">\n          {{questionItem?.questionText}}\n        </h3>\n      </div>\n    </div> -->\n  </div>\n\n  <!-- Additional Info -->\n  <!-- The below code can be written effectively nested ngIf for Rich Text & Other onw for Progress Bar -->\n  <div *ngIf=\"questionItem.additionalRichContent && qbItem.progressBar\" >\n    <div\n      class=\"nxt-additional \" [innerHTML]=\"innerhtml\">\n    </div>\n  </div>\n  <div *ngIf=\"questionItem.additionalRichContent && !qbItem.progressBar\">\n    <div class=\"info-alert ques-alert1\">\n      <div class=\"infodiv\" [innerHTML]=\"innerhtml\"></div>\n    </div>\n  </div>\n\n  <!-- Dropdown-->\n  <div *ngIf=\"dropdownFlag\" >\n    <div class=\"nxt-dis-flex\">\n      <select class=\"nxtdropdown\"\n        [ngClass]=\"{\n          'dt-line nxt-myt-align3 nxt-myt-align2 dpDown nxt-dropbox down1 myt-dropbox myt-border-r myt-font1': qbItem?.progressBar,\n          'custom-select': !qbItem?.progressBar\n        }\" class=\"mr-sm-2 dd-height nxt-dropbox \"  id=\"dropdown\" [(ngModel)]=\"inpValue\" (change)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error ? 'red' : inpValue?.length > 0 ? '#fff' : ''\n        }}\" style.color=\"{{ questionItem?.error ? 'red' : '' }}\">\n        <option *ngFor=\"let opt of questionItem.options\" class=\"option\" value=\"{{ opt.value }}\">\n          {{ opt.value }}\n        </option>\n        <!-- HA 20DEC23 For Translation -->\n        <option value=\".\" disabled hidden>{{'pleaseMakeChoice' | nxtCustomTranslate: 'pleaseMakeChoice'}}</option>\n      </select>\n    </div>\n  </div>\n\n  <!--VD Radio update -->\n  <div *ngIf=\"radioFlag || dataFlag\" class=\"\">\n    <span *ngIf=\"this.questionItem.error\" class=\"nxt-error-msg\"> {{ questionItem?.errorMessage }}</span>\n    <div class=\"nxt-custom-radio-container\">\n      <div *ngFor=\"let opt of questionItem.options\" \n      [class]=\" this.questionItem.error ? 'nxt-custom-radio-option invalid' : 'nxt-custom-radio-option'\">\n        <input\n          type=\"radio\"\n          [id]=\"opt.value\"\n          [(ngModel)]=\"inpValue\"\n          name=\"inpValue\"\n          [value]=\"opt.value\"\n          (change)=\"optionChange(opt.value)\"\n        />\n        <label class=\"nxt-radio-label\" [for]=\"opt.value\"> {{ opt.value }}</label>\n      </div>\n    </div>\n\n    <!-- <div class=\"nxt-dis-flex\">\n      <div *ngFor=\"let opt of questionItem.options.records\" class=\"radio nxt-radioOption\">\n        <label class=\"nxt-radiocontainer container myt-font4\">\n          <input type=\"radio\" [id]=\"opt.id\" [(ngModel)]=\"inpValue\" name=\"inpValue\" [value]=\"opt.value\"\n            (change)=\"optionChange(opt.value)\" />\n          {{ opt.value }}\n        </label>\n      </div>\n    </div> -->\n  </div>  \n  <!-- Checkbox -->\n  <div *ngIf=\"checkboxFlag\" class=\"\">\n    <div *ngIf=\"questionItem?.error\" class=\"cond-div2\">\n      {{ questionItem?.errorMessage }}\n    </div>\n    <div class=\"nxt-checkbox-container\">\n      <div *ngFor=\"let item of optionValues\" class=\"nxt-checkbox-wrapper\">\n        <label class=\"nxt-container1\">\n          <input type=\"nxt-checkbox\" [id]=\"item.id\" [(ngModel)]=\"item.checked\" (click)=\"clearError()\" />\n          <span class=\"nxt-checkbox-label\">{{ item.value }}</span>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <!-- Text -->\n  <div *ngIf=\"textFlag\">\n    <!-- HA 31-JAN-24 To reduce the margin -->\n    <div [class]=\"'col-md-' + questionItem?.size + ' paddingnone'\">\n      <input class=\"nxt-input\" type=\"text\" [(ngModel)]=\"inpValue\" \n       id=\"text-input-id\" required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : ''\n        }}\" oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0\"></i> -->\n    </div>\n  </div>\n\n  <!-- Text Area -->\n  <div *ngIf=\"taFlag\" >\n    <div>\n      <textarea class=\"nxt-input nxt-text-area\" id=\"ta-input-id\" [(ngModel)]=\"inpValue\" (click)=\"clearError()\" style.border-color=\"{{\n          this.questionItem?.error\n            ? 'red'\n            : inpValue?.length > 0 && taFocusOut\n            ? '#87be1c'\n            : ''\n        }}\" (focusout)=\"taFocusOut = true\"\n        oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\"></textarea>\n      <!-- <i class=\"fa fa-check nxt-check-icon\" aria-hidden=\"true\" *ngIf=\"inpValue?.length > 0 && taFocusOut\" style=\"display: flex; justify-content: flex-end;\"></i> -->\n    </div>\n  </div>\n\n  <!-- CC Number Format -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"numberFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"Text\" placeholder=\"0000 0000 0000 0000 0000 0000\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\"\n        [(ngModel)]=\"inpValue\" id=\"number-input-id\" (ngModelChange)=\"CCOnChange($event)\" required=\"\" maxlength=\"29\"\n        (focus)=\"clearError()\" oninput=\"this.value=this.value.replace(/[^0-9 ]/g,'');\"\n        style=\"width:-webkit-fill-available;\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n  <!-- END-->\n\n  <!-- AlphaNumeric -->\n  <div *ngIf=\"alphanumericFlag\" class=\"col-md-12\"> <!--UI not completed-->\n    <div style=\"position:relative;\">\n      <!-- HA 20DEC23 For Translation -->\n      <input type=text placeholder=\"{{'zeroOfZero' | nxtCustomTranslate: 'zeroOfZero'}}\" style=\"padding:5px 5px 5px 150px;\" id=\"youridhere\"/>\n    </div>\n  </div>\n\n  <!-- Email -->\n  <!-- RS 09DEC24 Changed keys-->\n  <div *ngIf=\"emailFlag\" class=\"col-md-12\">\n    <div class=\"nxt-dis-flex\">\n      <input type=\"email\" [ngClass]=\"{ boxoutline: qbItem?.progressBar }\" [(ngModel)]=\"inpValue\" id=\"email-input-id\"\n        required=\"\" (focus)=\"clearError()\" style.border-color=\"{{\n          this.questionItem.error\n            ? 'red'\n            : inpValue?.length > 0\n            ? '#87be1c'\n            : ''\n        }}\" />\n    </div>\n  </div>\n\n  <!-- DateTime -->\n  <div *ngIf=\"dtFlag\" class=\"col-md-12 paddingZero nxtmyt-time1\" >\n    <!-- Error Handling -->\n    <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n    color: red;\">{{questionItem?.error?.errorMsg}}</div>\n\n    <!-- Date -->\n    <div *ngIf=\"dateFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- HA 31-JAN-24 These labels were occuping the empty space when date question comes-->\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n          <!-- HA 20DEC23 For Translation -->\n          <!-- HA 02FEB24 Additional param to update the question -->\n        </div>\n      </div>\n    </div>\n\n    <!-- Time -->\n    <div *ngIf=\"timeFlag\">\n      <div class=\"col-md-12 paddingBottom\">\n        <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n        <div class=\"nxt-dis-flex\">\n         <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                           dateandTime: !qbItem?.progressBar}\" \n              id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n              (focus)=\"(clearSQError) \">\n          <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n            (focus)=\"clearError()\">\n            <option value=\"\">HH</option>\n            <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n              {{ hour }}\n            </option>\n          </select>\n          <span class=\"colon\"> : </span>\n          <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n            (focus)=\"clearError()\">\n            <option value=\"\">MM</option>\n            <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n              {{ minute }}\n            </option>\n          </select>\n          <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem?.x24Hours == false\">\n            <span class=\"colon\"> : </span>\n            <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n              <option value=\"AM\">AM</option>\n              <option value=\"PM\">PM</option>\n            </select>\n            <!-- <div [ngClass]=\"{'': qbItem.progressBar, 'dateandTime': !qbItem.progressBar}\"></div> -->\n          </div>\n        </div>\n      </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Attachment / File -->\n  <div *ngIf=\"fileFlag\">\n    <div *ngIf=\"!qbItem.progressBar\">\n      <div class=\"info-alert\" style.border-color=\"{{ this.questionItem?.error ? 'red' : '' }}\">\n        <label class=\"picture-upload\" for=\"file-upload\">\n          <span class=\"picture-upload-child\">\n          </span>\n        </label>\n      </div>\n      <input id=\"file-upload\" type=\"file\" accept=\"{{ allowedFileExtension }}\" (change)=\"uploadFile($event,this.questionItem)\" />\n    </div>\n    <ul *ngIf=\"\n        attachments?.length > 0 &&\n        questionItem?.type === 'File' &&\n        !qbItem?.progressBar\n      \" class=\"attach-ulist col-md-12\">\n      <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n        {{ attachment.attachmentName}}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n      </li>\n    </ul>\n\n    <!-- Attachment Progress -->\n    <div *ngIf=\"qbItem.progressBar\">\n      <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"uploading-file-name \">{{ attachment.attachmentName }}</span>\n        <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n          (click)=\"deleteAttachment(attachment.attachmentId)\" />\n      </div>\n      <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n      \n        <!--<img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"icon-edit1\" />-->\n        <span class=\"f-Name\" *ngIf=\" questionItem?.style?.showLabel !== false\" [innerHTML]=\"getText(questionItem?.questionText)\"> {{ questionItem?.questionText}}</span>\n        <label class=\"file-label \">\n          <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/file-upload.png\" class=\"file-icon\"/>\n          <!-- HA 20DEC23 For Translation -->\n          <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n            accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event)\"\n            class=\"file-upload-btn\">\n        </label>\n      </div>\n    </div>\n  </div>\n  <!-- RS 09DEC24 Changed keys-->\n  <!-- Book -->\n  <div *ngIf=\"bookFlag\">\n    <div [class]=\"qbItem.isShengel ? 'form-group content-box' : 'form-group'\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div [class]=\"qbItem.isShengel ? '' : 'nxt-myt-align3'\" [class]=\"qbItem.isShengel ? 'col-lg-' + ques.size + ' paddingnone' : 'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of subQuestions;let i = index\" [id]=\"ques.id\">\n          <div [ngClass]=\"{ down2: qbItem?.progressBar }\">\n            <span *ngIf=\"ques?.style?.showLabel !== false\">{{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText }}</span>\n          </div>\n          <div class=\"col-md-12 paddingZero nxtmyt-dateTimeNew\" *ngIf=\"ques.type === 'Time' || ques.type === 'Date'\">\n            <div *ngIf=\"ques.type === 'Date'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.dateText }}</label> -->\n                <div class=\"dateandtime\">\n                  <!-- HA 20DEC23 For Translation -->\n                  <!-- HA 02FEB24 Additional param to update the question -->\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"ques.type === 'Time'\">\n              <div class=\"col-md-12 paddingBottom\">\n                <!-- <label class=\"date-time colorf\">{{ questionItem?.timeText }}</label> -->\n                <div class=\"dateandtime\">\n                <div [ngClass]=\"{'dt-line date-line nxt-dt-time': qbItem?.progressBar,\n                                  dateandTime: !qbItem?.progressBar}\" \n                      id=\"dateandTime\" [style.border-color]=\"questionItem?.error ? 'red': questionItem?.input?.length > 0 ? '' : ''\"\n                      (focus)=\"(clearSQError) \">\n                  <select name=\"hours\" class=\"datetime showHour nxtmyt-time myt-hour\" [(ngModel)]=\"selectedHour\" id=\"hour\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">HH</option>\n                    <option [value]=\"hour\" *ngFor=\"let hour of hours\">\n                      {{ hour }}\n                    </option>\n                  </select>\n                  <span class=\"colon\"> : </span>\n                  <select name=\"minutes\" class=\"datetime nxtshowminute nxtmyt-time\" [(ngModel)]=\"selectedMinute\" id=\"minute\"\n                    (focus)=\"clearError()\">\n                    <option value=\"\">MM</option>\n                    <option [value]=\"minute\" *ngFor=\"let minute of minutes\">\n                      {{ minute }}\n                    </option>\n                  </select>\n                  <div [ngClass]=\"{ colon1: qbItem?.progressBar }\" *ngIf=\"questionItem.x24Hours == false\">\n                    <span class=\"colon\"> : </span>\n                    <select name=\"AM/PM\" class=\"nxtmyt-time\" [(ngModel)]=\"selectedMeridiem\" id=\"meridiem\">\n                      <option value=\"AM\">AM</option>\n                      <option value=\"PM\">PM</option>\n                    </select>\n                  </div>\n                </div>\n              </div>\n              </div>\n            </div>\n          </div>\n         \n            <!-- SKS11JUN25 Text, Email, label, number, DateTime-->\n            <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'TextArea'\"\n            [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n            [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n            [value]=\"ques.input\"\n            [question]=\"ques\"\n            [labelFont]=\"ques.font\"\n            [label]=\"(ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText\"\n            [labelColor]=\"ques.fontColor\"\n            [labelSize]=\"ques.fontSize\"\n            [inputValueSize]=\"ques.fontSize\"\n            [labelWeight]=\"ques.fontWeight\"\n            [inputWeight]=\"ques.fontWeight\"\n            [showLabel]=\"ques.style?.showLabel\"\n            inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n            [placeholder]=\"(ques.id+'.question') | nxtCustomTranslate : ques?.question\"\n            [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n            [inputId]=\"ques.trackingId\"\n            [errorMessages]=\"{ required: 'This field is required' }\"\n            [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n            (inputValue)=\"childEventCapture($event,ques)\"\n            >\n        </nxt-input>\n          <div *ngIf=\"ques.type === 'Location'\">\n            <!-- for pick location -->\n            <!-- HA10012024 Added Api key as input -->\n            <app-pick-location [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.input\" (locationSelected)=\"handleLocationSelected($event,ques)\"></app-pick-location>\n          </div>\n\n          <!-- Email -->\n          <div *ngIf=\"ques.type === 'Email'\">\n            <input type=\"email\" [(ngModel)]=\"ques.input\" [id]=\"ques.id\" required=\"\" (focus)=\"clearSQError(ques.id)\"\n              style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\" />\n          </div>\n\n          <div *ngIf=\"ques.type === 'File'\">\n            <div *ngIf=\"!qbItem.progressBar\">\n              <label class=\"picture-upload custom-file-upload bgcolor-w\" for=\"file-upload\">\n                <span class=\"picture-upload-child\">\n                </span>\n              </label>\n              <input id=\"file-upload\" type=\"file\" accept=\"{{ bookFlagAccept }}\" (change)=\"uploadFile($event,ques)\" />\n            </div>\n\n            <ul *ngIf=\"\n                attachments?.length > 0 &&\n                ques.type === 'File' &&\n                !qbItem.progressBar\n              \" class=\"attach-ulist col-md-12\">\n              <li *ngFor=\"let attachment of attachments\" class=\"align-l\">\n                {{ attachment.attachmentName\n                }}<span class=\"attach-list\" (click)=\"deleteAttachment(attachment.attachmentId)\">X</span>\n              </li>\n            </ul>\n            <div class=\"myt-box\" *ngIf=\"qbItem.progressBar\">\n\n              <div *ngFor=\"let attachment of attachments\" class=\"nxtfile-uploading-box\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"uploading-file-name myt-font1 font-weight: normal;\"> {{ attachment.attachmentName }}</span>\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-delete%402x.png\" class=\"deleteIcon\"\n                  (click)=\"deleteAttachment(attachment.attachmentId)\" />\n              </div>\n              <div class=\"nxtfile-upload-box\" style.border-color=\"{{ this.questionItem.error ? 'red' : '' }}\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%402x.png\" class=\"nxt-icon-edit1\" />\n                <span class=\"f-Name\">{{ ques?.question }}</span>\n                <label class=\"file-label \">\n                  <span style=\"color: #c5281c;text-decoration:underline\">\n                    {{'attach' | nxtCustomTranslate : 'attach'}}\n                  </span>\n                  <!-- HA 20DEC23 For Translation -->\n                  <input name=\"attachment\" type=\"file\" placeholder=\"{{'toBuyTicket' | nxtCustomTranslate : 'toBuyTicket'}}\" multiple\n                    accept=\".pdf, .png, .jpg, .jpeg, .heic, .application/pdf\" (change)=\"uploadFile($event,ques)\"\n                    class=\"file-upload-btn\">\n                </label>\n              </div>\n            </div>\n          </div>\n\n          <!-- Table -->\n          <div *ngIf=\"ques.type === 'Table'\" class=\"\">\n            <!-- SKS13MAR25 nxt table change -->\n            <nxt-datatable isEditRow isDeleteRow actionButton isButtons\n                [question]=\"ques\"\n                from = \"formBuilder\"\n                (valueChange)=\"childEventCapture($event.data, ques); clearSQError(ques.id)\"\n                [tableConfig]=\"ques.tableConfig\"\n                tableId = \"\"\n                direction = \"ltr\"\n                tableWidth = \"auto\"\n                >\n            </nxt-datatable>\n          </div>\n\n          <!-- SKS25MAR25 Image -->\n          <div *ngIf=\"ques.type === 'Image'\" class=\"\">\n            <img [src]=\"ques.imageData\" [style.border]=\"ques.imageData ? '1px solid black' : 'none'\" />\n          </div>\n\n          <!-- Dropdown -->\n          <div *ngIf=\"ques.type === 'Dropdown'\" class=\"nxtdropdown\">\n            <!-- for common dropdown -->\n            <!-- HA 20DEC23 For Translation -->\n            <app-custom-dropdown [fromShengel]=\"qbItem.isShengel\"\n                    [options]=\"ques.options\"\n                    [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.Name\"\n                    [selectedValue]=\"ques.input\"\n                    placeholder=\"---{{'select' | nxtCustomTranslate : 'select'}}---\"\n                    [errorMessage]=\"ques?.errorMessage\"\n                    [error]=\"ques?.error\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\">\n            </app-custom-dropdown>\n          </div>          \n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!--List start-->\n  <div *ngIf=\"listFlag\">\n    <div class=\"form-group\">\n      <div class=\"form-row\">\n        <div class=\"col-md-12\" *ngIf=\"questionItem.error\" style=\"font-size: 18px;\n            color: red;\">{{questionItem?.error?.errorMsg}}</div>\n        <div class=\"nxt-myt-align3\" [class]=\"'col-md-' + ques.size + ' paddingnone'\"\n          *ngFor=\"let ques of getLocalSubQuestions(questionItem.id);let i = index\">\n          <div>\n            <span class=\"nxt-dis-flex myt-font3 myt-font7\">{{ ques?.question }}</span>\n          </div>\n          <div *ngIf=\"ques.type === 'Text'\">\n            <input type=\"text\" [(ngModel)]=\"ques.input\" [ngClass]=\"{\n             'nxt-dis-flex dt-line date-line nxtbookText boxoutline myt-font1': qbItem.progressBar,\n             textBox: !qbItem.progressBar\n            }\" id=\"text\" [id]=\"ques.uniqueSubQId\" required=\"\" (focus)=\"clearLocalSubQuesError(ques)\"\n            style.border-color=\"{{ ques.error ? 'red' : '' }}\" placeholder=\"{{ ques.question }}\"\n            oninput=\"this.value=this.value.replace(/[^a-zA-Z0-9\\s.:;,?]/g,'');\" />\n          </div>\n        </div>\n        <div class=\"\" *ngIf=\"addFlag\">\n          <!-- HA 20DEC23 For Translation -->\n          <button (click)=\"Add(getLocalSubQuestions(questionItem.id))\" class=\"btn\">{{'add' | nxtCustomTranslate : 'add'}}</button>\n         </div>\n      </div>\n    </div>\n  </div>\n  <!--List End-->\n\n  <!-- Actions -->\n  <!-- VD button condition removed-->\n  <div class=\"flexer\">\n    <!-- Backward / Back -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n     <!--VD disabled -->\n    <div class=\"backbutton\" \n      [style.visibility]=\"questionStack.length > 0 ? 'visible' : 'hidden'\" *ngIf=\"qbItem.back\">\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-left-bt': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleBackClick()\">\n          {{ qbItem?.back }}\n        </button>\n    </div>\n\n    <!-- Forward / Next -->\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div  *ngIf=\"qbItem.next\" >\n      <div class=\"nxtbutton\">\n         <!--VD disabled -->\n        <button [disabled]=\"isButtonDisabled\" [ngClass]=\"{\n            'nxt-rusty': qbItem.progressBar,\n            'nxt-btn btn-primary':\n              !qbItem.progressBar\n          }\" (click)=\"handleNextClick()\">\n          {{ qbItem.next }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Summary -->\n<div *ngIf=\"this.abItem?.status === 'Completed'\" class=\"col-lg-12\" style=\"text-align: center;\">\n  <h2>{{this.qbItem.summaryText}}</h2>\n  <p>{{this.qbItem.summarySubText}}</p>\n</div>\n\n<div *ngIf=\"summary && summary.length > 0\" height=\"100% !important\" class=\"col-md-12\" [ngClass]=\"{\n              'col-md-12':!qbItem.progressBar\n               }\">\n    <h1 class=\"nxt-header1 nxt-summarypadd\" >{{ qbItem.subTitle }}</h1>         \n  <div id=\"nxt-progress2\" *ngIf=\"!qbItem.progressBar && this.abItem.status != 'Completed' \">\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div *ngFor=\"let qa of summary\">\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div [ngClass]=\"{ summary:  !qbItem.progressBar }\">\n           <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <p [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</p>\n            </div>\n            <!-- VD Question No added -->\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'question': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'question': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\"><span>{{ qa.questionNumber }}</span>\n                {{ qa.quesValue }}\n              </div>\n            </div>\n            <div class=\"nxt-answer\" >\n                <div *ngIf=\"qa.qTyp === 'File'\">\n                  <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                  {{ qa.ansValue }}\n                </div>\n                <!-- HA 02FEB24 Displaying the in summary for book type -->\n                <div *ngIf=\"qa.qTyp == 'Book'\">\n                  <div *ngFor=\"let val of qa.myVal\">\n                    <p *ngIf=\"val.style?.showLabel !== false\">{{ val.questionText }}:<span>{{ val.input }}</span></p>\n                  </div>\n                </div>\n                <!-- HA 02FEB24 Displaying the value for direct question -->\n                <div *ngIf=\"qa.qTyp != 'File' && qa.qTyp != 'Book'  && qa.style?.showLabel !== false\">{{ (qa.id+'.questionText') | nxtCustomTranslate : qa?.questionText}} <span></span>{{ qa.ansValue }}</div>\n                <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n                  <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                    <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                    <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n                  </button>\n                </div>\n          </div>\n        </div>\n        </div>\n    </div>\n    </div>\n  </div>\n\n\n\n  <div id=\"nxt-progress2\" *ngIf=\"qbItem.progressBar \">\n    <div [ngClass]=\"{'bgColor nxtsummary-top' : qbItem.progressBar }\" >\n      <div id=\"nxt-progress-summary\" *ngIf=\"qbItem.progressBar\">\n      <div *ngIf=\"qbItem.summaryText && qbItem.progressBar\" \n      [ngClass]=\"{ summaryTitle: qbItem.progressBar }\">\n        <h3 class=\"nxt-subTitle\" >{{ qbItem.summaryText }}</h3>\n        <div *ngIf=\"abItem.status != 'Completed'\" class=\"nxt-subTitle1\" >{{ qbItem.summarySubText}}</div>\n      </div>\n    </div>\n    <div *ngIf=\"!qbItem.progressBar\">\n      <h3 class=\"summary-h\">\n        {{ qbItem.summaryText }}\n      </h3>\n    </div>\n  </div>\n  <div [ngClass]=\"{ 'full-summary': qbItem.progressBar }\">\n    <div class=\"summary-groupText myt-font2\">\n      <!-- <p>Informe de da\u00F1o</p> -->\n    </div>\n    <div *ngFor=\"let qa of summary\" >\n        <div [ngClass]=\"{ non:  qbItem.progressBar }\">\n          <div class=\"summary\">\n            <!-- <div *ngIf=\"!qbItem.edit\"\n              [ngClass]=\"{ 'question sum-ques myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <a [ngClass]=\"{ asum: this.abItem.status === 'Completed' }\" (click)=\"handleEditClick(qa.quesId)\"\n                [innerHTML]=\"getText(qa.quesValue)\">{{ qa.quesValue }}</a>\n            </div>\n            <div *ngIf=\"qbItem.edit\"\n              [ngClass]=\"{ 'sum-ques question myt-font3 myt-font8': this.abItem.status != 'Completed' }\">\n              <div [ngClass]=\"{ 'sum-ques1 question1 summary-completed myt-font3 myt-font8': this.abItem.status === 'Completed' }\"\n                [innerHTML]=\"getText(qa.quesValue)\">\n                {{ qa.quesValue }}\n              </div>\n            </div> -->\n            <div *ngIf=\"qbItem.edit && this.abItem.status != 'Completed'\" style=\"background: #dedddd;\">\n              <button class=\"nxt-edit\" (click)=\"handleEditClick(qa.quesId)\">\n                <img *ngIf=\"deviceInfo.os === 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" style=\"width:50%!important;\" class=\"nxt-icon-editios\"/>\n                <img *ngIf=\"deviceInfo.os !== 'iOS'\" src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-edit%402x.png\" class=\"nxt-icon-edit\" />\n              </button>\n            </div>\n           \n            <div class=\"nxt-answer\">\n              <div *ngIf=\"qa.qTyp === 'File'\">\n                <img src=\"https://rnxt.s3.amazonaws.com/MytIcon/icon-doc-img%401.png\" class=\"nxt-icon-edit-summary\" />\n                {{ qa.ansValue }}\n              </div>\n              <div *ngIf=\"qa.qTyp != 'File'\">\n                {{ qa.ansValue }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- <div class=\"flexer1\" *ngIf=\"abItem\">\n    <div class=\"\" *ngIf=\"abItem.status == 'Completed' && qbItem.cancel\">\n      <div class=\"col-md-12\">\n        <button [ngClass]=\"{'btn-text': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\"\n          (click)=\"handleCancelClick()\">\n          {{ qbItem.cancel }}\n        </button>\n      </div>\n    </div>\n  </div> -->\n\n  <!-- Group Actions -->\n  <div class=\"align-edit-submit\" *ngIf=\"abItem.status != 'Completed'\">\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <div class=\"col-md-6\" *ngIf=\"qbItem.submit\">\n      <button [ngClass]=\"{ 'btn-text2': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar }\" \n        (click)=\"handleSubmitClick()\">\n        {{ qbItem.submit }}\n      </button>\n    </div>\n    <!-- HA 02FEB24 Hiding the button when there is no value from the backend -->\n    <!-- <div class=\"col-md-6\" *ngIf=\"qbItem.edit\">\n      <button [ngClass]=\"{'grey': qbItem.progressBar,\n                            'nxt-btn btn-primary btn-lg btn-block btn-back-color': !qbItem.progressBar}\" \n              (click)=\"handleBackClickNew()\">\n        {{ qbItem.edit }}\n      </button>\n    </div> -->\n  </div>\n\n</div>", styles: [".nxt-rusty{width:235px;background-color:#cd2810;color:#fff;text-align:center;font-size:24px;height:60px;margin-left:0%;margin-top:11%;cursor:pointer}.nxt-edit{background-color:#dfe2e7;border:none;text-decoration:underline;font-size:16px;vertical-align:super;font-weight:700}.nxt-icon-edit{width:15px;height:18px;margin:0 6px 1px -13%}.nxt-icon-edit1,.nxt-icon-edit-summary{width:29px;height:28px}.nxtquestiondiv1{padding-left:25px;padding-right:25px;padding-top:3%}.nxtquestiondiv2{padding-top:0;padding-bottom:20px;padding-left:11px}.align-edit-submit{display:flex;flex-direction:column;align-items:center}.nxtquestiondiv2{padding-left:0!important;padding-bottom:0!important}.bgColor{text-align:center;background-color:#dedddd}.nxt-questionalign{text-align:center;padding-right:4%;margin-bottom:4px;margin-top:2rem;color:#560d05}.nxtquestionStyle{font-weight:600}.nxt-largeTitle{padding-left:16px;padding-top:12px}.nxtquestion-f-size{font-size:.7rem}.non{background-color:#dedddd}.circle{margin-left:25px}.titlebar{padding-left:10%;padding-top:1%;padding-right:10%}.infodiv{padding-left:2rem;overflow:hidden}.info-alert{border:1px solid #e6e6e6;border-radius:5px;padding:.5em;margin-left:15px;margin-right:15px;margin-bottom:1rem;display:flex}.addtional-info{margin-left:-33px;margin-top:-21px;font-size:16px;font-weight:400;font-stretch:normal;font-style:normal;color:#6f7072;font-family:Helvetica}.ques-alert1{margin-bottom:1rem;display:flex}.iposition{margin-left:3rem}.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{position:relative;padding:20px;float:center;width:100%}.col-md-12{padding:0!important}.cond-div2{color:red;font-weight:700;padding-bottom:3%}.nxtradiotext{margin-top:-30px}.nxtdropdown{display:flex;justify-content:flex-start}.nxt-radiocontainer{display:flex;border:1px solid none;border-radius:.3em;padding-bottom:20px;padding-top:30px;align-items:center;text-align:center;cursor:pointer;font-family:Rubik,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;color:#000}.nxt-radioOption{display:flex;align-content:flex-start;margin-top:-16px;width:6%}.nxt-btn{border-radius:.3rem;font-size:1.25rem;line-height:1;padding:.5rem 1rem;width:100%;outline:0}.nxtmyt-time{width:fit-content!important;background-image:none;background:#dedddd;margin:0;padding:0;border:none;font-size:15px;letter-spacing:1px}.nxtshowminute{padding-left:5px;margin-top:0%}.myt-time1{margin-top:-32px;margin-left:-15px}.nxtmyt-dateTimeNew{margin-left:-14px}.myt-hour{width:fit-content}.date-time{padding:0;margin:0;text-align:left}.dateandTime{border:1px solid #d2d4d6;position:relative;display:flex;border-radius:2px;background-image:url(https://dynamic-css1.s3.ap-south-1.amazonaws.com/External+css/time.svg);background-size:25px;background-repeat:no-repeat;background-position:99% center;background-color:#fff;height:37px}.date-line{border-bottom:1px solid #fff}.nxt-dt-time{width:57%;margin-left:2.3%;text-align:left;background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/icon-clock%402x.png)!important;background-size:25px!important;background-repeat:no-repeat!important;background:#dedddd}.nxtdate-picker{width:57%;margin-left:2.5%;height:44px;border-radius:5px}.datetime:focus{border:none;box-shadow:none}#meridiem{margin-top:-2px;border:hidden}.textBox{width:100%;height:36px}.textBox1{width:100%;height:36px;margin:30px -15px 30px 19px}.option{color:#767676}.paddingnone{padding-bottom:0%}.paddingZero{padding:0}.summary-h{text-align:left;padding-bottom:15px}.summary{display:flex;flex-direction:column;align-items:flex-start;border-bottom:2px solid #fff;margin-left:10px;margin-right:10px;margin-bottom:10px}.asum{color:#6f7072;margin-top:5%;padding-left:3%}.nxtquestion{padding:10px;font-size:18px;color:#080809}.nxtquestion1{margin-left:14rem;background:#dedddd;color:#560d05;font-size:15px;padding-bottom:20px;text-align:left}.nxt-answer{display:flex;align-items:center;font-size:14px;font-weight:400;width:100%;word-wrap:break-word;justify-content:space-between;background-color:#dfe2e7;padding:5px 5px 5px 10px;border-radius:4px}.myt-font{font-size:20px}.myt-font1{width:16rem;font-size:14px;font-weight:400}.myt-font2{font-size:18px}.myt-font3,.myt-font4{font-size:14px}.myt-font5{margin-top:-18px;font-weight:400;font-size:14px;color:#560d05}.myt-font6{font-size:20px;font-weight:700;color:#c5281c;text-align:center}.myt-font10{font-weight:400;font-size:14px;color:#560d05;margin-top:10px}.myt-font7{display:flex;justify-content:flex-start;padding-left:20.5%;font-weight:100;color:#560d05}.myt-font8{font-weight:400}.dpDown:focus-visible{outline:none}.summaryTitle{padding-left:0%;padding-top:4%}.summary-groupText{width:55%;margin:auto auto -2%;text-align:left;font-weight:700;padding-top:0%;padding-bottom:0%;background-color:#dedddd;color:#c5281c}.nxtsum-ques{width:55%;margin:auto}.nxtsum-ques1{width:59%;margin:auto}.header-style{padding:15px!important;background:#f8f8f8;color:#898989!important;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0!important;justify-content:left!important;font-size:15px!important}.file-upload-btn{display:none;border-bottom:groove}.nxtfile-upload-box{max-width:45%;margin-left:29.5%;height:auto;padding:16px;display:flex;border:2px;border-bottom:1px solid #fff;background-color:#dedddd;justify-content:space-between;color:#d8d8d8}.file-label{cursor:pointer;color:#c5281c;text-decoration:underline}.nxtfile-uploading-box{font-size:14px;font-weight:400;max-width:45%;margin-left:29.5%;height:56px;padding:16px;display:flex;border:2px;background-color:#dedddd;justify-content:space-between;margin-bottom:0;color:#d8d8d8}.uploading-file-name{color:#6f7072}.deleteIcon{cursor:pointer;height:24px}.file-icon{max-width:24px;height:26px}.picture-upload{height:200px;width:200px;position:relative;border:1px solid #ccc;display:flex;padding:6px 12px;cursor:pointer;background-color:#fff;align-items:center}.colon{line-height:42px;padding:0;margin-top:10%;color:#6f7072}.colon1{display:contents}.nxt-subTitle{color:#c5281c;font-weight:600;margin-top:-3%}.nxt-subTitle1{color:#560d05;font-size:14px;font-weight:500}.fa{display:flex}.nxt-check-icon{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;padding:5px;margin-top:.4rem}.nxt-check-icon2{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:.6rem;line-height:3}.nxt-check-icon3{display:flex;justify-content:flex-end;color:#87be1c;z-index:1;margin-top:3rem}.align-l{text-align:left;padding:1% 2% 2%;margin-bottom:-5%;margin-top:-1%}.attach-ulist{list-style-type:none;margin-left:0;margin-bottom:.7rem}.attach-list{float:right;cursor:pointer;padding:0}.icolor{color:#99b5ce}.picture-upload-child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tspan:nth-child(1){font-size:25px;font-weight:700}.tspan:nth-child(2){display:none}.pic-upload{position:absolute;top:15%;left:85%;transform:translate(-50%,-50%)}.btn-block+.btn-block{margin-top:.5rem}input[type=submit].btn-block,input[type=reset].btn-block,input[type=button].btn-block{width:100%}.btn-lg,.btn-group-lg>.btn{padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;border-radius:.3rem}.btn-lg+.dropdown-toggle-split,.btn-group-lg>.btn+.dropdown-toggle-split{padding-right:.75rem;padding-left:.75rem}.btn-primary:hover{color:#fff}.btn-primary:focus,.btn-primary.focus{color:#fff;box-shadow:0 0 0 .2rem #268fff80}.btn-primary.disabled,.btn-primary:disabled{color:#fff}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff}.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem #268fff80}.btn-back-color{display:block;width:100%;padding:.5rem 1rem;font-size:1.25rem;line-height:1.5;text-align:center;border-radius:.3rem;margin:0}.fa-plus:hover{color:#87be1c}.fa-plus{color:#99b5ce}.btn-primary{border-color:#007bff}.ques-Title{text-align:left;font-size:24px}.nxtgrey{width:38%;height:56px;margin:0px 0px 0px 0rem;padding:14px 0 17px;background-color:#cd2810;color:#fff;font-size:24px}.nxtbtn-text{width:330px;font-size:24px;background-color:#cd2810;color:#fff;height:60px;margin-left:auto;margin-top:0;cursor:pointer;border-radius:40px}.nxtbtn-text2{width:21rem;font-size:24px;background-color:#cd2810;border:none;color:#fff;height:60px;margin-left:17rem;margin-right:17rem;margin-top:10px;cursor:pointer;border-radius:40px}.flexer{max-width:100%;margin-top:30px;width:100%;display:flex;justify-content:flex-end}.flexer1{max-width:100%;width:100%;display:flex;justify-content:center;margin-top:32px}.btn-r{right:0rem}.nxtdown{margin-left:0;width:57%}.nxt-dis-flex{display:flex;flex-direction:column}.nxt-radioOption{display:flex;align-items:center;margin-bottom:8px}.radiocontainer{display:flex;align-items:center;margin-left:-17px;padding-right:15px}.nxt-radiocontainer input{margin-right:8px;flex-shrink:0}.down1{width:16rem;margin-left:0rem;background-color:#dedddd}.down2{margin-top:0%;padding-left:11px}.myt-dropbox{background-image:url(https://rnxt.s3.amazonaws.com/MytIcon/down-red.png);background-origin:content-box;background-position:right -.9rem center;background-repeat:no-repeat;background-size:35px 33px;padding-right:1.35rem;background-color:#dedddd}.boxoutline{outline:transparent;background-color:#dedddd}.nxt-left-bt{width:238px;background-color:#cd2810;color:#fff;padding:0;text-align:center;font-size:24px;cursor:pointer;height:60px;margin-top:125px;margin-bottom:4rem;margin-left:-234px}.townArea{text-align:left;height:43px;padding-left:15px}.townArea:hover{background-color:#9e9e9e2e}.listFlow{font-weight:400;color:#767676;z-index:2;position:absolute;background:#dedddd;box-shadow:0 2px 5px #00000040}.myt-radio input[type=radio]:checked:after{background-color:#c5281c}.full-summary{margin-top:4%}.container-radio input{display:none;position:absolute;opacity:0;cursor:pointer}.f-Name{color:#6f7072;font-size:14px;font-weight:400;word-break:break-word}.nxtsummary-top{margin-top:4%}.myt-border-r{border-top:none;border-left:none;border-right:none;border-radius:0}.nxt-myt-align{margin-left:4%;line-height:2}.nxt-myt-align1{margin-left:-29px}.nxt-myt-align2{margin-left:-15px}.nxt-myt-align3{width:100%}.nxt-myt-book1{margin-top:-20px}.colorf{color:#555}.nxtbookText{width:57%;margin-left:21.5%;background-color:#dedddd}.nxtbook{width:32.6%;margin-left:34%;background-color:#dedddd}.nxtsummary-completed{padding-left:2%;margin-top:20px}.nxttown{margin:0;background-color:#dedddd}.nxt-town-drop{margin:auto;width:57%}.nxtquestiondiv1.padd-bottom{padding-bottom:2rem!important;padding-top:2rem!important}@media (max-width: 1090px){.nxt-icon-edit{margin:0 6px -3px -13%!important}}@media (max-width: 768px){.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9{float:center}.col-md-12{width:100%}.col-md-11{width:91.66666667%}.col-md-10{width:83.33333333%}.col-md-9{width:75%}.col-md-8{width:66.66666667%}.col-md-7{width:58.33333333%}.col-md-6{width:50%}.col-md-5{width:41.66666667%}.col-md-4{width:33.33333333%}.col-md-3{width:25%}.col-md-2{width:16.66666667%}.col-md-1{width:8.33333333%}}.nxtbutton{padding-left:10px}.nxt-custom-radio-option{display:flex;flex-direction:row;margin-bottom:5px}.nxt-custom-radio-option.invalid label{color:red}input[type=radio]{width:auto}.nxt-radio-label{margin-left:15px;margin-bottom:0}.nxt-error-msg{color:red;font-size:12px;margin-top:5px}.nxt-input{height:38px;border:1.5px solid #43455533;border-radius:4px;padding:5px}.nxt-label{font-weight:700;color:#434555;padding-left:2px}.nxt-text-area{height:100px;width:100%}@media screen and (max-width: 480px){.nxt-icon-edit{margin:0 6px 4px -35%!important}.nxt-rusty{width:25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:25rem;margin-left:-25rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:89%}}@media screen and (max-width: 420px){.nxt-icon-edit{margin:-9px 1px 4px 4%!important}.nxt-rusty,.nxtbtn-text{width:21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-left-bt{width:21rem;margin-left:-21rem;height:68px!important;font-size:20px!important;font-weight:700!important}.nxt-container1{margin-left:0%}.nxtfile-upload-box,.nxtfile-uploading-box{max-width:100%}.nxtmyt-dateTimeNew{margin-left:-10px!important}.dateandtime{padding-left:0!important}.nxt-dt-time{padding-left:.8%!important}.myt-font7{padding-left:0rem;margin-left:-3.5%}.nxtgrey{width:21rem;margin:-21px 0 0;height:68px!important;font-size:20px!important;font-weight:700!important}.nxtbtn-text2{width:21rem;margin-right:0rem;margin-left:0;height:68px!important;font-size:20px!important;font-weight:700!important}}.mydp .selection{padding:0!important}.text-border{border-top:none;border-left:none;border-right:none;border-radius:0;border-bottom:1px solid #fff!important;background-color:#dedddd}.nxt-additional{display:flex;font-size:20px;text-align:left;font-weight:200;margin-left:4%;justify-content:center;color:#3e3e3c;padding:0 30%}.nxt-check{display:block}.nxt-container1{display:inline-grid;position:relative;cursor:pointer;font-size:20px;-webkit-user-select:none;user-select:none}.bottomspace1{padding-bottom:14px!important}.myt-321{font-size:20px;font-weight:700;color:#c5281c;margin-top:11px}.myt-345{display:none}.panel{-moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,.1);border-radius:0;border:none;box-shadow:0 1px 2px #0000001a;margin-bottom:20px}.panel .panel-body{padding:20px}.panel-heading{border-radius:0;border:none!important;padding:10px 20px}.panel-default>.panel-heading{background-color:#fafafa;border-bottom:none;color:#2a323c;border:1px solid #e3e3e3!important}.panel-title{margin-bottom:0;margin-top:0;font-family:Rubik,sans-serif;font-weight:400}.panel-footer{background:#fafafa;border-top:0}.panel-color .panel-title{color:#fff}.panel-primary>.panel-heading{background-color:#03a9f4}.panel-success>.panel-heading{background-color:#01ba9a}.panel-info>.panel-heading{background-color:#18bae2}.panel-warning>.panel-heading{background-color:#f8ca4e}.panel-danger>.panel-heading{background-color:#f62f37}.panel-dark>.panel-heading{background-color:#2a323c;color:#fff}.panel-fill{border-radius:3px}.panel-fill .panel-heading{background-color:transparent;color:#fff;border-bottom:1px solid rgba(255,255,255,.5)!important}.panel-fill .panel-body{color:#ffffffd9}.panel-fill.panel-default .panel-body{color:#666}.panel-fill.panel-default .panel-heading{background-color:transparent;color:#333;border-bottom:1px solid rgba(0,0,0,.1)!important}.panel-fill.panel-primary{background-color:#03a9f4}.panel-fill.panel-success{background-color:#01ba9a}.panel-fill.panel-info{background-color:#18bae2}.panel-fill.panel-warning{background-color:#f8ca4e}.panel-fill.panel-danger{background-color:#f62f37}.panel-fill.panel-dark{background-color:#2a323c}.panel-group .panel .panel-heading a[data-toggle=collapse].collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading .accordion-toggle.collapsed:before{content:\"\\f0d7\"}.panel-group .panel .panel-heading a[data-toggle=collapse]{display:block}.panel-group .panel .panel-heading a[data-toggle=collapse]:before{content:\"\\f0d8\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading .accordion-toggle{display:block}.panel-group .panel .panel-heading .accordion-toggle:before{content:\"\\f068\";display:block;float:right;font-family:FontAwesome;font-size:14px;text-align:right;width:25px}.panel-group .panel .panel-heading+.panel-collapse .panel-body{border-top:none!important;border:1px solid #e3e3e3}.panel-group .panel-heading{padding:12px 26px}.panel-group.panel-group-joined .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-group-joined .panel-group .panel+.panel{border-top:1px solid #eeeeee;margin-top:0}.panel-body label{color:#9a9a9a;font-size:14px;font-weight:400;display:inline-block;max-width:100%;margin-bottom:5px}.font-size{font-size:14px}.panel-title>.small,.panel-title>.small>a,.panel-title>a,.panel-title>small,.panel-title>small>a{color:inherit;text-decoration:none}.panel-title{font-size:16px}@media (min-width: 300px) and (max-width: 399px){.nxtselbtngroup{padding-left:1.3%!important}}@media (min-width: 400px) and (max-width: 480px){.nxtselbtngroup{padding-left:.9%!important}}@media screen and (min-width: 871px){.nxtselbtngroup{padding-right:4px!important}}@media screen and (min-width: 1024px){.ES-style{position:absolute;left:7px;font-size:.9rem;color:#555;top:9px}}@media screen and (max-width: 1024px){.ES-style{position:absolute;left:.6rem;font-size:.95rem;color:#555;top:.57rem}}.summary-volver{display:none}.nxt-checkbox-container{display:flex;flex-direction:column}.nxt-checkbox-wrapper{display:flex;align-items:center;margin-bottom:10px}.nxt-container1{display:flex;align-items:center}.nxt-container1 input[type=checkbox]{margin-right:10px}.nxt-checkbox-label{margin-left:10px}.nxt-main{margin-top:100px;background-color:#03a9f4}\n"] }]
+        }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: SharedService }, { type: i1$2.ActivatedRoute }, { type: i1$1.DomSanitizer }, { type: i5.UntypedFormBuilder }, { type: i8.DeviceDetectorService }, { type: i0.ElementRef }], propDecorators: { qbId: [{
                 type: Input
             }], insuranceStartDate: [{
                 type: Input
@@ -59069,7 +58980,6 @@ class QuestionbookComponent {
     dataService;
     changeService;
     storageService;
-    i18nService;
     cdr;
     document;
     qbItem;
@@ -59153,12 +59063,11 @@ class QuestionbookComponent {
     handleCalendarDate = new EventEmitter();
     handleCalendarEvent = new EventEmitter();
     bookQuestionsMap = new Map();
-    constructor(sfService, dataService, changeService, storageService, i18nService, cdr, document) {
+    constructor(sfService, dataService, changeService, storageService, cdr, document) {
         this.sfService = sfService;
         this.dataService = dataService;
         this.changeService = changeService;
         this.storageService = storageService;
-        this.i18nService = i18nService;
         this.cdr = cdr;
         this.document = document;
     }
@@ -59788,16 +59697,16 @@ class QuestionbookComponent {
         }
         return questions;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: I18nService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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" }, 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\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <!-- RA09DEC24 Changed keys-->\n        <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n            [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n            <!-- VD 09May24 is hide field change-->\n            <div *ngIf=\"!ques.isHidden\" 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 ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n                    [style]=\"ques.style?.labelStyle\">\n                    <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\"\n                        [ngStyle]=\"{\n                        'font-family': ques.font,\n                        'color': ques.fontColor,\n                        'font-size': ques.fontSize,\n                        'font-weight': ques.fontWeight\n                      }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n                        <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n                        <!-- SKS13MAR25 only show on file type -->\n                        <!-- RS 17JAN2025 -->\n                        <!-- Displays icons with tooltips help text -->\n                        <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n                            [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n                        <!-- RS 17JAN2025 -->\n                        <!--  Displays icons with tooltips for file requirements -->\n                        <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n                            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n                            style=\"margin-left: 4px;\">i</div>\n                    </span>\n                </div>\n                <!-- calendar  -->\n                <div *ngIf=\"ques.type === 'Calendar'\">\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                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                    </app-custom-model>\n                </div>\n\n                <!-- SKS11JUN25 for pick location -->\n                <app-pick-location  *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n\n                <!-- SKS25MAR25 Image -->\n                <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                    (mouseleave)=\"isImageHover = false;\">\n                    <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                fill=\"#6C757D\" />\n                        </svg>\n                        <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\" [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 [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.fontColor\"\n                    [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n                <!-- SKS21MAR25 line -->\n                <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                <!-- SKS13MAR25 data table -->\n                <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [tableConfig]=\"ques.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n                </nxt-datatable>\n                <!-- list -->\n                <nxt-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" \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                <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                </app-custom-dropdown>\n                <!-- // VD 02Aug24 custom-radio component -->\n                <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n                    <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                        [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                        [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                    </app-custom-radio>\n                </div>\n\n                <!-- Attachment / Files -->\n                <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n                    (deletedFileData)=\"deleteFile($event)\"\n                    ></app-file-upload>\n                <!-- SKS11JUN25 Button -->\n                <nxt-button\n                    *ngIf=\"ques.type === 'Button'\"\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'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n                    [questions]=\"readQuestions(ques.qbReference, ques.qbReferenceQuestions)\"\n                    (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n                <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n                    [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' :  ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [value]=\"ques.input\"\n                    [question]=\"ques\"\n                    [labelFont]=\"ques.font\"\n                    [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\"\n                    [inputValueSize]=\"ques.fontSize\"\n                    [labelWeight]=\"ques.fontWeight\"\n                    [inputWeight]=\"ques.fontWeight\"\n                    [showLabel]=\"ques.style?.showLabel\"\n                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n                    [inputId]=\"ques.trackingId\"\n                    [errorMessages]=\"{ required: 'This field is required' }\"\n                    [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n                    [minDate]=\"ques.minDate\"\n                    [rows]=\"3\"\n                    (inputValue)=\"childEventCapture($event.value,$event.question)\"\n                    >\n                </nxt-input>\n            </div>\n        </div>\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            <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\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}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.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;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"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { 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: "pipe", type: I18nPipe, name: "i18n" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "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", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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" }, 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\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <!-- RA09DEC24 Changed keys-->\n        <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n            [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n            <!-- VD 09May24 is hide field change-->\n            <div *ngIf=\"!ques.isHidden\" 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 ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n                    [style]=\"ques.style?.labelStyle\">\n                    <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\"\n                        [ngStyle]=\"{\n                        'font-family': ques.font,\n                        'color': ques.fontColor,\n                        'font-size': ques.fontSize,\n                        'font-weight': ques.fontWeight\n                      }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n                        <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n                        <!-- SKS13MAR25 only show on file type -->\n                        <!-- RS 17JAN2025 -->\n                        <!-- Displays icons with tooltips help text -->\n                        <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n                            [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n                        <!-- RS 17JAN2025 -->\n                        <!--  Displays icons with tooltips for file requirements -->\n                        <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n                            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n                            style=\"margin-left: 4px;\">i</div>\n                    </span>\n                </div>\n                <!-- calendar  -->\n                <div *ngIf=\"ques.type === 'Calendar'\">\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                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                    </app-custom-model>\n                </div>\n\n                <!-- SKS11JUN25 for pick location -->\n                <app-pick-location  *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n\n                <!-- SKS25MAR25 Image -->\n                <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                    (mouseleave)=\"isImageHover = false;\">\n                    <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                fill=\"#6C757D\" />\n                        </svg>\n                        <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\" [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 [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.fontColor\"\n                    [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n                <!-- SKS21MAR25 line -->\n                <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                <!-- SKS13MAR25 data table -->\n                <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n                </nxt-datatable>\n                <!-- list -->\n                <nxt-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" \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                <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                    placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                </app-custom-dropdown>\n                <!-- // VD 02Aug24 custom-radio component -->\n                <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n                    <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                        [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                        [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                    </app-custom-radio>\n                </div>\n\n                <!-- Attachment / Files -->\n                <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n                    (deletedFileData)=\"deleteFile($event)\"\n                    ></app-file-upload>\n                <!-- SKS11JUN25 Button -->\n                <nxt-button\n                    *ngIf=\"ques.type === 'Button'\"\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'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n                    [questions]=\"readQuestions(ques.qbReference, ques.qbReferenceQuestions)\"\n                    (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n                <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n                    [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' :  ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [value]=\"ques.input\"\n                    [question]=\"ques\"\n                    [labelFont]=\"ques.font\"\n                    [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\"\n                    [inputValueSize]=\"ques.fontSize\"\n                    [labelWeight]=\"ques.fontWeight\"\n                    [inputWeight]=\"ques.fontWeight\"\n                    [showLabel]=\"ques.style?.showLabel\"\n                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n                    [inputId]=\"ques.trackingId\"\n                    [errorMessages]=\"{ required: 'This field is required' }\"\n                    [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n                    [minDate]=\"ques.minDate\"\n                    [rows]=\"3\"\n                    (inputValue)=\"childEventCapture($event.value,$event.question)\"\n                    >\n                </nxt-input>\n            </div>\n        </div>\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            <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\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}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.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;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"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { 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: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "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", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { 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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionbookComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-questionbook', standalone: true, imports: [
                         CommonModule,
-                        FormsModule, ImageCropperComponent, NxtFileUploadComponent, CustomRadioComponent, CustomDropdownComponent, NxtButtonComponent, NxtSearchBox, NxtDatatable, PickLocationComponent, CustomModelComponent, CustomCalendarComponent, I18nPipe, MatTooltipModule, NxtInput, IconSelectorComponent, NxtCustomTranslatePipe
-                    ], template: "<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <!-- RA09DEC24 Changed keys-->\n        <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n            [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n            <!-- VD 09May24 is hide field change-->\n            <div *ngIf=\"!ques.isHidden\" 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 ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n                    [style]=\"ques.style?.labelStyle\">\n                    <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\"\n                        [ngStyle]=\"{\n                        'font-family': ques.font,\n                        'color': ques.fontColor,\n                        'font-size': ques.fontSize,\n                        'font-weight': ques.fontWeight\n                      }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n                        <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n                        <!-- SKS13MAR25 only show on file type -->\n                        <!-- RS 17JAN2025 -->\n                        <!-- Displays icons with tooltips help text -->\n                        <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n                            [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n                        <!-- RS 17JAN2025 -->\n                        <!--  Displays icons with tooltips for file requirements -->\n                        <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n                            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n                            style=\"margin-left: 4px;\">i</div>\n                    </span>\n                </div>\n                <!-- calendar  -->\n                <div *ngIf=\"ques.type === 'Calendar'\">\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                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                    </app-custom-model>\n                </div>\n\n                <!-- SKS11JUN25 for pick location -->\n                <app-pick-location  *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n\n                <!-- SKS25MAR25 Image -->\n                <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                    (mouseleave)=\"isImageHover = false;\">\n                    <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                fill=\"#6C757D\" />\n                        </svg>\n                        <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\" [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 [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.fontColor\"\n                    [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n                <!-- SKS21MAR25 line -->\n                <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                <!-- SKS13MAR25 data table -->\n                <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [tableConfig]=\"ques.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n                </nxt-datatable>\n                <!-- list -->\n                <nxt-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" \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                <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                    placeholder=\"---{{'select' | i18n:i18nService.currentLanguage}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                </app-custom-dropdown>\n                <!-- // VD 02Aug24 custom-radio component -->\n                <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n                    <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                        [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                        [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                    </app-custom-radio>\n                </div>\n\n                <!-- Attachment / Files -->\n                <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n                    (deletedFileData)=\"deleteFile($event)\"\n                    ></app-file-upload>\n                <!-- SKS11JUN25 Button -->\n                <nxt-button\n                    *ngIf=\"ques.type === 'Button'\"\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'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n                    [questions]=\"readQuestions(ques.qbReference, ques.qbReferenceQuestions)\"\n                    (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n                <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n                    [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' :  ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [value]=\"ques.input\"\n                    [question]=\"ques\"\n                    [labelFont]=\"ques.font\"\n                    [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\"\n                    [inputValueSize]=\"ques.fontSize\"\n                    [labelWeight]=\"ques.fontWeight\"\n                    [inputWeight]=\"ques.fontWeight\"\n                    [showLabel]=\"ques.style?.showLabel\"\n                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n                    [inputId]=\"ques.trackingId\"\n                    [errorMessages]=\"{ required: 'This field is required' }\"\n                    [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n                    [minDate]=\"ques.minDate\"\n                    [rows]=\"3\"\n                    (inputValue)=\"childEventCapture($event.value,$event.question)\"\n                    >\n                </nxt-input>\n            </div>\n        </div>\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            <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\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}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.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;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: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: I18nService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
+                        FormsModule, ImageCropperComponent, NxtFileUploadComponent, CustomRadioComponent, CustomDropdownComponent, NxtButtonComponent, NxtSearchBox, NxtDatatable, PickLocationComponent, CustomModelComponent, CustomCalendarComponent, MatTooltipModule, NxtInput, IconSelectorComponent, NxtCustomTranslatePipe
+                    ], template: "<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <!-- RA09DEC24 Changed keys-->\n        <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n            [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n            <!-- VD 09May24 is hide field change-->\n            <div *ngIf=\"!ques.isHidden\" 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 ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n                    [style]=\"ques.style?.labelStyle\">\n                    <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\"\n                        [ngStyle]=\"{\n                        'font-family': ques.font,\n                        'color': ques.fontColor,\n                        'font-size': ques.fontSize,\n                        'font-weight': ques.fontWeight\n                      }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n                        <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n                        <!-- SKS13MAR25 only show on file type -->\n                        <!-- RS 17JAN2025 -->\n                        <!-- Displays icons with tooltips help text -->\n                        <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n                            [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n                        <!-- RS 17JAN2025 -->\n                        <!--  Displays icons with tooltips for file requirements -->\n                        <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n                            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n                            style=\"margin-left: 4px;\">i</div>\n                    </span>\n                </div>\n                <!-- calendar  -->\n                <div *ngIf=\"ques.type === 'Calendar'\">\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                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                    </app-custom-model>\n                </div>\n\n                <!-- SKS11JUN25 for pick location -->\n                <app-pick-location  *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n\n                <!-- SKS25MAR25 Image -->\n                <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                    (mouseleave)=\"isImageHover = false;\">\n                    <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                fill=\"#6C757D\" />\n                        </svg>\n                        <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\" [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 [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.fontColor\"\n                    [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n                <!-- SKS21MAR25 line -->\n                <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                <!-- SKS13MAR25 data table -->\n                <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n                </nxt-datatable>\n                <!-- list -->\n                <nxt-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" \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                <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                    placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                </app-custom-dropdown>\n                <!-- // VD 02Aug24 custom-radio component -->\n                <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n                    <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                        [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                        [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                    </app-custom-radio>\n                </div>\n\n                <!-- Attachment / Files -->\n                <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n                    (deletedFileData)=\"deleteFile($event)\"\n                    ></app-file-upload>\n                <!-- SKS11JUN25 Button -->\n                <nxt-button\n                    *ngIf=\"ques.type === 'Button'\"\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'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n                    [questions]=\"readQuestions(ques.qbReference, ques.qbReferenceQuestions)\"\n                    (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n                <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n                    [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' :  ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [value]=\"ques.input\"\n                    [question]=\"ques\"\n                    [labelFont]=\"ques.font\"\n                    [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\"\n                    [inputValueSize]=\"ques.fontSize\"\n                    [labelWeight]=\"ques.fontWeight\"\n                    [inputWeight]=\"ques.fontWeight\"\n                    [showLabel]=\"ques.style?.showLabel\"\n                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n                    [inputId]=\"ques.trackingId\"\n                    [errorMessages]=\"{ required: 'This field is required' }\"\n                    [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n                    [minDate]=\"ques.minDate\"\n                    [rows]=\"3\"\n                    (inputValue)=\"childEventCapture($event.value,$event.question)\"\n                    >\n                </nxt-input>\n            </div>\n        </div>\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            <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\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}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.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;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: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }], propDecorators: { qbItem: [{
@@ -59901,7 +59810,8 @@ class BookletComponent {
         let apidata = this.apiUrl;
         this.dataService.apikey(apidata);
         this.translationService.setLanguage(this.languageCode);
-        this.translationService.updateTranslations(this.bookletJSON.translationMap);
+        if (this.bookletJSON.translationMap)
+            this.translationService.updateTranslations(this.bookletJSON.translationMap);
     }
     // VD NOV23 - update the json data when bookletId and bookletJSON changes
     ngOnChanges(simplechanges) {
@@ -59920,7 +59830,8 @@ class BookletComponent {
             if (this.questionbookComponent) {
                 this.questionbookComponent.processData();
             }
-            this.translationService.updateTranslations(this.bookletJSON.translationMap);
+            if (this.bookletJSON.translationMap)
+                this.translationService.updateTranslations(this.bookletJSON.translationMap);
         }
         if (this.languageCode) {
             this.translationService.setLanguage(this.languageCode);
@@ -59955,7 +59866,8 @@ class BookletComponent {
             }
         }
         else if (this.bookletJSON) {
-            this.translationService.updateTranslations(this.bookletJSON.translationMap);
+            if (this.bookletJSON.translationMap)
+                this.translationService.updateTranslations(this.bookletJSON.translationMap);
             // Try to pass a value from Backend to differentiate the QuestionBook Read and AnswerBook Read
             this.isAnswerFlag = true;
             if (this.bookletJSON != null && this.bookletJSON != undefined && this.bookletJSON?.bookQuestionsMap) {
@@ -60481,177 +60393,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['questionbook']
             }] } });
 
-// HA 19DEC23 File created for translation
-class I18nModule {
-    static forRoot(config) {
-        return {
-            ngModule: I18nModule,
-            providers: [
-                I18nService,
-                {
-                    provide: i18nConfigService,
-                    useValue: config
-                }
-            ]
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: I18nModule, imports: [CommonModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nModule, imports: [CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                    // I18nPipe,
-                    // I18nComponent
-                    ],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
-        }] });
-
-// HA 19DEC23 File created for translation
-class I18nComponent {
-    i18nService;
-    // @Output() handleEve:EventEmitter<any> = new EventEmitter();
-    constructor(i18nService) {
-        this.i18nService = i18nService;
-    }
-    ngOnInit() {
-        // this.handleEve.emit();
-    }
-    firstClick(event) {
-        this.i18nService.languageChange(event);
-        // this.handleEve.emit();
-        window.location.reload();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nComponent, deps: [{ token: I18nService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: I18nComponent, selector: "app-i18n", ngImport: i0, template: `
-   <a  *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
-
-            (click)="firstClick(lang.lang)">
-            <span class="mr-3">
-                {{lang.lang}}
-            </span>
-          </a>
-
-  `, isInline: true, styles: [".selected-language{color:green!important;font-weight:700;font-size:24px!important}\n", ".not-selected-language{color:#555;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: I18nComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-i18n', template: `
-   <a  *ngFor="let lang of i18nService.langList" href="javascript:void(0);" class="not-selected-language" [ngClass]="{'selected-language': i18nService.currentLanguage === lang.lang}"
-
-            (click)="firstClick(lang.lang)">
-            <span class="mr-3">
-                {{lang.lang}}
-            </span>
-          </a>
-
-  `, styles: [".selected-language{color:green!important;font-weight:700;font-size:24px!important}\n", ".not-selected-language{color:#555;font-weight:700}\n"] }]
-        }], ctorParameters: () => [{ type: I18nService }] });
-
-const enI18n = {
-    required: "Required",
-    addMore: "Add More",
-    select: "Select",
-    attachment: "Attachment",
-    chooseFiles: "Choose files",
-    uploadFile: "Upload File",
-    thisFieldIsRequired: "This field is required.",
-    pickYourLocation: "Pick Your Location",
-    // firstName: "First Name",
-    // lastName: "Last Name",
-    // division: "Division",
-    // numberPlate: "Number Plate",
-    calibrated: "Calibrated",
-    enterValue: "Enter Value",
-    details: "Details", // HA 20FEB24 PTW Details to Details
-    pleaseMakeChoice: "Please make a choice",
-    attach: "Attach",
-    add: "Add",
-    zeroOfZero: "0 of 0",
-    selectDate: "Select date",
-    toBuyTicket: "to buy a ticket",
-    pickLocation: "Pick Location",
-    enterLocation: "Enter Location",
-    searchNearestLocation: "Search Nearest Location",
-    currentTheme: "ltr",
-};
-
-var enI18n$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: enI18n
-});
-
-const arI18n = {
-    required: "مطلوب",
-    addMore: "أضف المزيد",
-    select: "يختار",
-    attachment: "مرفق",
-    chooseFiles: "اختر الملفات",
-    uploadFile: "رفع ملف",
-    thisFieldIsRequired: "هذه الخانة مطلوبه.",
-    pickYourLocation: "اختر موقعك",
-    // firstName: "الاسم الأول",
-    // lastName: "اسم العائلة",
-    // division: "قسم",
-    // numberPlate: "لوحة الأرقام",
-    calibrated: "معايرة",
-    enterValue: "أدخل القيمة",
-    details: "تفاصيل", // HA 20FEB24 PTW details to Details
-    pleaseMakeChoice: "يرجى الاختيار",
-    attach: "يربط",
-    add: "يضيف",
-    zeroOfZero: "0 من 0",
-    selectDate: "حدد تاريخ",
-    toBuyTicket: "لشراء تذكرة",
-    pickLocation: "اختر الموقع",
-    enterLocation: "إدخال الدولة",
-    searchNearestLocation: "البحث عن أقرب موقع",
-    currentTheme: "rtl",
-};
-
-var arI18n$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: arI18n
-});
-
-const tamI18n = {
-    required: "தேவை",
-    addMore: "மேலும் சேர்க்கவும்",
-    select: "தேர்ந்தெடுக்கவும்",
-    attachment: "இணைப்பு",
-    chooseFiles: "கோப்புகளைத் தேர்ந்தெடுக்கவும்",
-    uploadFile: "கோப்பை பதிவேற்றவும்",
-    thisFieldIsRequired: "இந்த புலம் தேவை.",
-    pickYourLocation: "உங்கள் இருப்பிடத்தைத் தேர்ந்தெடுக்கவும்",
-    // firstName: "முதல் பெயர்",
-    // lastName: "கடைசி பெயர்",
-    // division: "பிரிவு",
-    // numberPlate: "இலக்கத்தகடு",
-    calibrated: "அளவீடு செய்யப்பட்டது",
-    enterValue: "மதிப்பை உள்ளிடவும்",
-    details: "விவரங்கள்", // HA 20FEB24 PTW Details to Details
-    pleaseMakeChoice: "தயவுசெய்து தேர்வு செய்யுங்கள்",
-    attach: "இணைக்கவும்",
-    add: "சேர்",
-    zeroOfZero: "0 இல் 0",
-    selectDate: "தேதியைத் தேர்ந்தெடுக்கவும்",
-    toBuyTicket: "டிக்கெட் வாங்க",
-    pickLocation: "இருப்பிடத்தைத் தேர்ந்தெடுக்கவும்",
-    enterLocation: "இருப்பிடத்தை உள்ளிடவும்",
-    searchNearestLocation: "அருகிலுள்ள இடத்தைத் தேடுங்கள்",
-    currentTheme: "ltr",
-};
-
-var tamI18n$1 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    default: tamI18n
-});
-
 // IMPORTANT: THIS FILE IS AUTO GENERATED! DO NOT MANUALLY EDIT OR CHECKIN!
 /* tslint:disable */
 const VERSION = {
@@ -60663,7 +60404,7 @@ const VERSION = {
     "semver": null,
     "suffix": "78a817f6-dirty",
     "semverString": null,
-    "version": "2.1.251"
+    "version": "2.1.253"
 };
 /* tslint:enable */
 
@@ -63229,8 +62970,8 @@ const COMMON_FIELD_PROPS = [
             { label: 'Variable', placeholder: 'variable', type: 'text', key: 'subText.variable', labelPath: 'VARIABLE' },
             { label: 'Field', placeholder: 'field', type: 'text', key: 'subText.field', labelPath: 'FIELD' },
             { label: 'Default Field', placeholder: 'defaultField', type: 'text', key: 'subText.defaultField', labelPath: 'DEFAULT_FIELD' },
-            { label: 'Get Full Object', placeholder: 'Get Full Object', type: 'boolean', key: 'subText.isObject', labelPath: 'GET_FULL_OBJECT' },
-            { label: 'Primary Reference Field', placeholder: 'Primary Reference Field', type: 'text', key: 'subText.postReferenceField', labelPath: 'PRIMARY_REFERENCE_FIELD' },
+            { label: 'Is Object', placeholder: 'Is Object', type: 'boolean', key: 'subText.isObject', labelPath: 'IS_OBJECT' },
+            { label: 'Post Reference Field', placeholder: 'Post Reference Field', type: 'text', key: 'subText.postReferenceField', labelPath: 'POST_REFERENCE_FIELD' },
             { label: 'Label Field', placeholder: 'labelField', type: 'text', key: 'subText.labelField', labelPath: 'LABEL_FIELD' },
             { label: 'Value Field', placeholder: 'valueField', type: 'text', key: 'subText.valueField', labelPath: 'VALUE_FIELD' },
             { label: 'Source Question Id', placeholder: 'sourceQuestionId', type: 'text', key: 'subText.sourceQuestionId', labelPath: 'SOURCE_QUESTION_ID' },
@@ -63331,12 +63072,9 @@ class FormBuilderService {
         const savedFormElements = localStorage.getItem('formElements');
         if (savedFormElements) {
             this.formElements = JSON.parse(savedFormElements);
-            this.emitFormElements();
+            this.formElementsSubject.next([...this.formElements]);
         }
     }
-    emitFormElements() {
-        this.formElementsSubject.next([...this.formElements]);
-    }
     intializeBook(book) {
         // AP 13MAR25 - Get the unique id in the bookQuestionsMap 
         this.unique_id = Object.keys(book.bookQuestionsMap)[0];
@@ -63350,6 +63088,13 @@ class FormBuilderService {
                     console.error("API Error:", error);
                 });
             }
+            if (element?.['options'] !== undefined && element?.['options'] !== null && Array.isArray(element['options'])) {
+                element['options'].forEach(opt => {
+                    if (opt.id !== undefined && opt.id !== null) {
+                        opt.id = opt.uniqueIdentifier;
+                    }
+                });
+            }
         });
         book.bookQuestionsMap[this.unique_id].subQuestions = tempbook;
         this.book = book;
@@ -63376,7 +63121,10 @@ class FormBuilderService {
                     }
                 });
             }
-            if (element.type === 'Table') {
+            if (element.type === 'Table' && element?.fieldsMeta) {
+                if (!Array.isArray(element?.fieldsMeta) && typeof element?.fieldsMeta === 'string') {
+                    element.fieldsMeta = JSON.parse(element?.fieldsMeta);
+                }
                 element?.fieldsMeta?.forEach(field => {
                     translationMap.en[field.uniqueIdentifier] = {};
                     keysToTranslate.forEach(key => {
@@ -63475,7 +63223,7 @@ class FormBuilderService {
     // AP 26FEB25 - clear the form elements 
     clearElements() {
         this.formElements = [];
-        this.emitFormElements();
+        this.formElementsSubject.next([...this.formElements]);
     }
     // Get the element component reference
     getElementComponent() {
@@ -63491,7 +63239,9 @@ class FormBuilderService {
         }
         element['questionBookId'] = this.unique_id;
         this.formElements.push(element);
-        this.emitFormElements();
+        this.formElementsSubject.next([...this.formElements]);
+        if (this.book?.bookQuestionsMap[Object.keys(this.book.bookQuestionsMap)[0]]?.subQuestions)
+            this.book.bookQuestionsMap[Object.keys(this.book.bookQuestionsMap)[0]].subQuestions = this.formElements;
     }
     // SKS13MAR25 add table element
     addTableElement(element, ind) {
@@ -63581,7 +63331,7 @@ class FormBuilderService {
                 if (elements[index]) {
                     elements[index] = { ...elements[index], ...updates };
                     this.formElements = elements;
-                    this.emitFormElements();
+                    this.formElementsSubject.next([...this.formElements]);
                 }
             }
             // Handle special cases
@@ -63592,9 +63342,11 @@ class FormBuilderService {
                 updatedElement.questionText = updatedElement.questionText.slice(0, -2);
             }
             this.formElements[index] = updatedElement;
-            this.emitFormElements();
+            this.formElementsSubject.next([...this.formElements]);
             // localStorage.setItem('formElements', JSON.stringify(this.formElements));
         }
+        if (this.book?.bookQuestionsMap[Object.keys(this.book.bookQuestionsMap)[0]]?.subQuestions)
+            this.book.bookQuestionsMap[Object.keys(this.book.bookQuestionsMap)[0]].subQuestions = this.formElements;
     }
     updateTitle(event) {
         //AP-10MAR25 Updates the title of the first record in the book  
@@ -63649,7 +63401,7 @@ class FormBuilderService {
         this.formElements.forEach((element, index) => {
             element.questionNumber = index + 1;
         });
-        this.emitFormElements();
+        this.formElementsSubject.next([...this.formElements]);
     }
     //AP-10MAR25 Returns the current book data  
     getBook() {
@@ -63665,14 +63417,14 @@ class FormBuilderService {
             }
         });
         this.formElements = updatedSubQuestions;
-        this.emitFormElements();
+        this.formElementsSubject.next([...this.formElements]);
     }
     // In FormBuilderService
     downloadElement() {
         let translationMap = this.book.translationMap;
         const keysToTranslate = ['questionText', 'helpText', 'question', 'label'];
-        this.unique_id = Object.keys(this.book.bookQuestionsMap)[0];
-        this.formElements?.forEach(element => {
+        let downloadFormElements = this.formElements;
+        downloadFormElements?.forEach(element => {
             keysToTranslate.forEach(key => {
                 element[key] = translationMap.en[element.id][key] ? translationMap.en[element.id][key] : null;
             });
@@ -63681,7 +63433,10 @@ class FormBuilderService {
                     opt.value = translationMap.en[opt.id]['value'];
                 });
             }
-            if (element.type === 'Table') {
+            if (element.type === 'Table' && element?.fieldsMeta) {
+                if (!Array.isArray(element?.fieldsMeta) && typeof element?.fieldsMeta === 'string') {
+                    element.fieldsMeta = JSON.parse(element?.fieldsMeta);
+                }
                 element?.fieldsMeta?.forEach(field => {
                     keysToTranslate.forEach(key => {
                         if (key !== 'question')
@@ -63695,11 +63450,12 @@ class FormBuilderService {
                 });
             }
         });
-        this.book?.questionbook?.action?.forEach((act) => {
+        let downloadBook = this.book;
+        downloadBook?.questionbook?.action?.forEach((act) => {
             act.name = translationMap.en[act.id]['name'];
         });
         // SKS28MAR25 remove qbReferenceQuestions for download time and subtext to convert too string
-        this.formElements.forEach(element => {
+        downloadFormElements.forEach(element => {
             if (element.type === 'book') {
                 delete element.qbReferenceQuestions;
             }
@@ -63731,10 +63487,10 @@ class FormBuilderService {
                 element.subText = typeof element?.subText !== 'object' ? element?.subText : JSON.stringify(element['subText']);
             }
         });
-        this.book.bookQuestionsMap[this.unique_id].subQuestions = this.formElements;
-        console.log('book', this.book);
+        downloadBook.bookQuestionsMap[Object.keys(this.book.bookQuestionsMap)[0]].subQuestions = downloadFormElements;
+        console.log('book', downloadBook);
         let tempElement = {};
-        this.formElements.forEach((element) => {
+        downloadFormElements.forEach((element) => {
             if (element.type === 'Dropdown' || element.type === 'Radio' || element.type === 'Checkbox') {
                 //AP 25FEB25 - Store the entire question with its options under its ID
                 tempElement[element.id] = {
@@ -63743,8 +63499,8 @@ class FormBuilderService {
                 };
             }
         });
-        this.book.sqOptions = tempElement;
-        return this.book;
+        downloadBook.sqOptions = tempElement;
+        return downloadBook;
     }
     // AP-06MAR25 - Element new order update
     updateElementsOrder(updatedElements) {
@@ -63764,7 +63520,7 @@ class FormBuilderService {
         });
         this.formElements = this.tempElem;
         // localStorage.setItem('formElements', JSON.stringify(this.formElements));
-        this.emitFormElements();
+        this.formElementsSubject.next([...this.formElements]);
     }
     // SKS19MAR25 update the element
     elementUpdate(index, element) {
@@ -64539,6 +64295,27 @@ class PropertiesComponent {
         });
         this.formBuilderService.elementUpdate(this.selectedElementIndex(), this.selectedElement());
     }
+    optionTranslationUpdate(option, event) {
+        //SKS28JUL25 Refresh the book signal from service
+        const updatedBook = this.formBuilderService.getBook();
+        this.book.set(updatedBook);
+        // Work with a mutable copy
+        const currentBook = this.book();
+        const translationMap = currentBook.translationMap || {};
+        const currentLang = this.translationService.getFormBuilderLanguage();
+        //SKS28JUL25 Ensure nested structure exists
+        if (!translationMap[currentLang])
+            translationMap[currentLang] = {};
+        if (!translationMap[currentLang][option.id])
+            translationMap[currentLang][option.id] = {};
+        // Set the translated value
+        translationMap[currentLang][option.id]['value'] = event;
+        // Update book and re-set the signal
+        currentBook.translationMap = translationMap;
+        this.book.set(currentBook); // Trigger reactive update
+        //SKS28JUL25 Update in service if needed
+        this.formBuilderService.updateBook(currentBook);
+    }
     getStyleKeys() {
         const style = this.selectedElement()?.style;
         return style && typeof style === 'object' ? Object.keys(style) : [];
@@ -64818,11 +64595,11 @@ class PropertiesComponent {
         return this.getValueByPath(subProp.key, element);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: FormBuilderService }, { token: TemplateService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PropertiesComponent, isStandalone: true, selector: "app-properties", inputs: { templateSelected: "templateSelected", selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n    @defer (when getProperties()) {\n      <div>\n        @defer (when selectedElement()?.type === 'Image') {\n          <image-cropper\n            *ngIf=\"selectedElement().imageData\"\n            [imageBase64]=\"selectedElement().orgImageData\"\n            [disabled]=\"false\"\n            [alignImage]=\"alignImage\"\n            [roundCropper]=\"roundCropper\"\n            [backgroundColor]=\"'white'\"\n            imageAltText=\"Alternative image text\"\n            [allowMoveImage]=\"false\"\n            [hideResizeSquares]=\"false\"\n            [canvasRotation]=\"canvasRotation()\"\n            [aspectRatio]=\"aspectRatio\"\n            [containWithinAspectRatio]=\"false\"\n            [maintainAspectRatio]=\"false\"\n            [cropperStaticWidth]=\"cropperStaticWidth\"\n            [cropperStaticHeight]=\"cropperStaticHeight\"\n            [cropperMinWidth]=\"cropperMinWidth\"\n            [cropperMinHeight]=\"cropperMinHeight\"\n            [cropperMaxWidth]=\"cropperMaxWidth\"\n            [cropperMaxHeight]=\"cropperMaxHeight\"\n            [resetCropOnAspectRatioChange]=\"true\"\n            [(cropper)]=\"cropper\"\n            [(transform)]=\"transform\"\n            [onlyScaleDown]=\"true\"\n            output=\"blob\"\n            format=\"png\"\n            (imageCropped)=\"imageCropped($event)\"\n            (cropperReady)=\"cropperReady($event)\"\n          ></image-cropper>\n          <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n        }\n        <div *ngIf=\"selectedElement()?.type === 'Book'\">\n          <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n          <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n            <nxt-search-box\n              [question]=\"selectedElement()\"\n              [apiMeta]=\"bookSubtext()\"\n              [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n              (searchValueChange)=\"childEventCapture($event.value)\"\n            ></nxt-search-box>\n            <div class=\"link-icon\">\n              <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n              <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n                <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n                <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n                <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n                <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n                <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n            <input *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              [class.read-only]=\"selectedElement()?.readOnly\"\n              [readonly]=\"selectedElement()?.readOnly\"\n            />\n            <input *ngIf=\"prop.type === 'number'\"\n              type=\"number\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            />\n            <select *ngIf=\"prop.type === 'select'\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            >\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n            </select>\n            <div *ngIf=\"prop.type === 'checkbox'\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n              />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n            </div>\n            <div *ngIf=\"prop.type === 'subQuestion'\">\n              <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n                <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n                />\n              </div>\n              <div\n                *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n              >\n                <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                  <div class=\"form-group\">\n                    <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                    <div *ngIf=\"subProp.type === 'array'\">\n                      <div *ngFor=\"let column of filteredColumns()\">\n                        <label>\n                          <input\n                            type=\"checkbox\"\n                            [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                            (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n                          >\n                          {{ column.apiName }}\n                        </label>\n                      </div>\n                    </div>\n                    <div *ngIf=\"subProp.type === 'radio'\">\n                      <div *ngFor=\"let column of filteredColumns()\">\n                        <label>\n                          <input\n                            type=\"radio\"\n                            [name]=\"subProp.key\"\n                            [value]=\"column.apiName\"\n                            [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n                            (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n                          >\n                          {{ column.apiName }}\n                        </label>\n                      </div>\n                    </div>\n                    <input\n                      *ngIf=\"subProp.type === 'text'\"\n                      type=\"text\"\n                      [placeholder]=\"subProp.placeholder\"\n                      [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n                      (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n                    />\n                    <input\n                      *ngIf=\"subProp.type === 'boolean'\"\n                      type=\"checkbox\"\n                      [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n                      (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n                    />\n                    <select\n                      *ngIf=\"subProp.type === 'select'\"\n                      [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n                      (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n                    >\n                      <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n                    </select>\n                    <input\n                      *ngIf=\"subProp.type === 'checkbox'\"\n                      type=\"checkbox\"\n                      [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n                      (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'align'\">\n              <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n                <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n              </button>\n            </div>\n            <div *ngIf=\"prop.type === 'style'\">\n              <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n                <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n              </button>\n            </div>\n            <div *ngIf=\"prop.type === 'color'\">\n              <input\n                type=\"color\"\n                [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n                (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              />\n            </div>\n            <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n              <div class=\"form-header\">\n                <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n                <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n              </div>\n              <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n                <div class=\"form-group\">\n                  <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n                  <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n                    <option value=\"GET\">GET</option>\n                    <option value=\"POST\">POST</option>\n                    <option value=\"PUT\">PUT</option>\n                    <option value=\"DELETE\">DELETE</option>\n                  </select>\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n                  <input type=\"color\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n                  <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n                  <span>{{ btn.borderRadius }}px</span>\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n                  <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n                  <input type=\"color\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n                  <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n                  <span>{{ btn.positionPercent }}%</span>\n                </div>\n                <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    }\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n    @defer (when getProperties()) {\n      <div>\n        <label>Label Id</label>\n        <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n          {{ headerSelect() ? bookId() : selectedElement()?.id }}\n        </div>\n        <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label  *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n                  />\n                  {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n                </label>\n              </div>\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n                  />\n                  {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n                </label>\n              </div>\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n                  />\n                  {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n                </label>\n              </div>\n            </div>\n            <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n              <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n                <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),  prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n                  <input type=\"text\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event\" placeholder=\"Option\" class=\"options\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()[prop.key], option.id)\">\n                  <span class=\"drag-handle\">\u2630</span>\n                </div>\n              </div>\n              <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n                <div class=\"add-varient\">\n                  <span class=\"text-lg\">+</span>\n                  <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n                </div>\n              </button>\n            </div>\n            <input *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              [class.read-only]=\"selectedElement()?.readOnly\"\n              [readonly]=\"selectedElement()?.readOnly\"\n            />\n            <div *ngIf=\"prop.type === 'subQuestion'\">\n              <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n                <div class=\"head-elements\">Sub Text</div>\n                <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                  alt=\"Toggle Arrow\" class=\"arrow-icon\">\n              </div>\n              <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n                <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                  <div class=\"form-group\">\n                    <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                    <input *ngIf=\"subProp.type === 'text'\"\n                    type=\"text\"\n                    [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getOptimizedSubPropValue(subProp)\"\n                    (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n                    [class.read-only]=\"selectedElement()?.readOnly\"\n                    [readonly]=\"selectedElement()?.readOnly\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'checkbox'\">\n              <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n              />\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n          <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n          <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n        </div>\n        <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n          <div class=\"form-group\">\n            <div *ngFor=\"let key of getStyleKeys()\">\n              <label>{{ key }}</label>\n              <input\n                type=\"text\"\n                [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n                (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n                placeholder=\"Enter {{ key }}\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n    @defer (when getProperties()) {\n      <div>\n        <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <select\n              *ngIf=\"prop.type === 'select'\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            >\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n            </select>\n            <input\n              *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n              (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n            />\n\n            <div class=\"flex-container\">\n              <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n                <input\n                  type=\"color\"\n                  [ngModel]=\"selectedElement()?.fontColor\"\n                  (ngModelChange)=\"setValueByPath('fontColor', $event, prop.isTranslate)\"\n                >\n              </div>\n              <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n                <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n                <input\n                  type=\"text\"\n                  [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n                  (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n                />\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n              <button\n                type=\"button\"\n                class=\"toggle-button\"\n                (click)=\"duplicateField(selectedElement())\"\n              >\n              {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n              </button>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    }\n  </div>\n\n  <div class=\"button-container\" *ngIf=\"!templateSelected\">\n    <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n    <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n  </div>\n\n  <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n    <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n  </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{margin-left:10px;cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i4.NgClass, i4.NgForOf, i4.NgIf, i5.NgSelectOption, i5.ɵNgSelectMultipleOption, i5.DefaultValueAccessor, i5.NumberValueAccessor, i5.RangeValueAccessor, i5.SelectControlValueAccessor, i5.NgControlStatus, i5.MinValidator, i5.NgModel, Promise.resolve().then(function () { return searchBox_component; }).then(m => m.NxtSearchBox), GetValueByPathPipe, NxtCustomTranslatePipe], () => [i4.NgClass, i4.NgIf, Promise.resolve().then(function () { return imageCropper_component; }).then(m => m.ImageCropperComponent), NxtCustomTranslatePipe], () => [i4.NgForOf, i4.NgIf, i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe], () => [i4.NgForOf, i4.NgIf, i5.NgSelectOption, i5.ɵNgSelectMultipleOption, i5.DefaultValueAccessor, i5.SelectControlValueAccessor, i5.NgControlStatus, i5.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe]] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PropertiesComponent, isStandalone: true, selector: "app-properties", inputs: { templateSelected: "templateSelected", selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n    @defer (when getProperties()) {\n      <div>\n        @defer (when selectedElement()?.type === 'Image') {\n          <image-cropper\n            *ngIf=\"selectedElement().imageData\"\n            [imageBase64]=\"selectedElement().orgImageData\"\n            [disabled]=\"false\"\n            [alignImage]=\"alignImage\"\n            [roundCropper]=\"roundCropper\"\n            [backgroundColor]=\"'white'\"\n            imageAltText=\"Alternative image text\"\n            [allowMoveImage]=\"false\"\n            [hideResizeSquares]=\"false\"\n            [canvasRotation]=\"canvasRotation()\"\n            [aspectRatio]=\"aspectRatio\"\n            [containWithinAspectRatio]=\"false\"\n            [maintainAspectRatio]=\"false\"\n            [cropperStaticWidth]=\"cropperStaticWidth\"\n            [cropperStaticHeight]=\"cropperStaticHeight\"\n            [cropperMinWidth]=\"cropperMinWidth\"\n            [cropperMinHeight]=\"cropperMinHeight\"\n            [cropperMaxWidth]=\"cropperMaxWidth\"\n            [cropperMaxHeight]=\"cropperMaxHeight\"\n            [resetCropOnAspectRatioChange]=\"true\"\n            [(cropper)]=\"cropper\"\n            [(transform)]=\"transform\"\n            [onlyScaleDown]=\"true\"\n            output=\"blob\"\n            format=\"png\"\n            (imageCropped)=\"imageCropped($event)\"\n            (cropperReady)=\"cropperReady($event)\"\n          ></image-cropper>\n          <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n        }\n        <div *ngIf=\"selectedElement()?.type === 'Book'\">\n          <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n          <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n            <nxt-search-box\n              [question]=\"selectedElement()\"\n              [apiMeta]=\"bookSubtext()\"\n              [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n              (searchValueChange)=\"childEventCapture($event.value)\"\n            ></nxt-search-box>\n            <div class=\"link-icon\">\n              <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n              <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n                <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n                <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n                <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n                <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n                <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n            <input *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              [class.read-only]=\"selectedElement()?.readOnly\"\n              [readonly]=\"selectedElement()?.readOnly\"\n            />\n            <input *ngIf=\"prop.type === 'number'\"\n              type=\"number\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            />\n            <select *ngIf=\"prop.type === 'select'\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            >\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n            </select>\n            <div *ngIf=\"prop.type === 'checkbox'\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n              />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n            </div>\n            <div *ngIf=\"prop.type === 'subQuestion'\">\n              <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n                <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n                />\n              </div>\n              <div\n                *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n              >\n                <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                  <div class=\"form-group\">\n                    <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                    <div *ngIf=\"subProp.type === 'array'\">\n                      <div *ngFor=\"let column of filteredColumns()\">\n                        <label>\n                          <input\n                            type=\"checkbox\"\n                            [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                            (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n                          >\n                          {{ column.apiName }}\n                        </label>\n                      </div>\n                    </div>\n                    <div *ngIf=\"subProp.type === 'radio'\">\n                      <div *ngFor=\"let column of filteredColumns()\">\n                        <label>\n                          <input\n                            type=\"radio\"\n                            [name]=\"subProp.key\"\n                            [value]=\"column.apiName\"\n                            [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n                            (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n                          >\n                          {{ column.apiName }}\n                        </label>\n                      </div>\n                    </div>\n                    <input\n                      *ngIf=\"subProp.type === 'text'\"\n                      type=\"text\"\n                      [placeholder]=\"subProp.placeholder\"\n                      [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n                      (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n                    />\n                    <input\n                      *ngIf=\"subProp.type === 'boolean'\"\n                      type=\"checkbox\"\n                      [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n                      (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n                    />\n                    <select\n                      *ngIf=\"subProp.type === 'select'\"\n                      [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n                      (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n                    >\n                      <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n                    </select>\n                    <input\n                      *ngIf=\"subProp.type === 'checkbox'\"\n                      type=\"checkbox\"\n                      [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n                      (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'align'\">\n              <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n                <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n              </button>\n            </div>\n            <div *ngIf=\"prop.type === 'style'\">\n              <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n                <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n              </button>\n            </div>\n            <div *ngIf=\"prop.type === 'color'\">\n              <input\n                type=\"color\"\n                [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n                (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              />\n            </div>\n            <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n              <div class=\"form-header\">\n                <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n                <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n              </div>\n              <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n                <div class=\"form-group\">\n                  <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n                  <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n                    <option value=\"GET\">GET</option>\n                    <option value=\"POST\">POST</option>\n                    <option value=\"PUT\">PUT</option>\n                    <option value=\"DELETE\">DELETE</option>\n                  </select>\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n                  <input type=\"color\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n                  <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n                  <span>{{ btn.borderRadius }}px</span>\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n                  <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n                  <input type=\"color\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n                  <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n                  <span>{{ btn.positionPercent }}%</span>\n                </div>\n                <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    }\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n    @defer (when getProperties()) {\n      <div>\n        <label>Label Id</label>\n        <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n          {{ headerSelect() ? bookId() : selectedElement()?.id }}\n        </div>\n        <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label  *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n                  />\n                  {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n                </label>\n              </div>\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n                  />\n                  {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n                </label>\n              </div>\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n                  />\n                  {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n                </label>\n              </div>\n            </div>\n            <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n              <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n                <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),  prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n                  <input type=\"text\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event; optionTranslationUpdate(option,$event)\" placeholder=\"Option\" class=\"options\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()[prop.key], option.id)\">\n                  <span class=\"drag-handle\">\u2630</span>\n                </div>\n              </div>\n              <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n                <div class=\"add-varient\">\n                  <span class=\"text-lg\">+</span>\n                  <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n                </div>\n              </button>\n            </div>\n            <input *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              [class.read-only]=\"selectedElement()?.readOnly\"\n              [readonly]=\"selectedElement()?.readOnly\"\n            />\n            <div *ngIf=\"prop.type === 'subQuestion'\">\n              <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n                <div class=\"head-elements\">Sub Text</div>\n                <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                  alt=\"Toggle Arrow\" class=\"arrow-icon\">\n              </div>\n              <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n                <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                  <div class=\"form-group\">\n                    <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                    <input *ngIf=\"subProp.type === 'text'\"\n                    type=\"text\"\n                    [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getOptimizedSubPropValue(subProp)\"\n                    (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n                    [class.read-only]=\"selectedElement()?.readOnly\"\n                    [readonly]=\"selectedElement()?.readOnly\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'checkbox'\">\n              <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n              />\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n          <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n          <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n        </div>\n        <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n          <div class=\"form-group\">\n            <div *ngFor=\"let key of getStyleKeys()\">\n              <label>{{ key }}</label>\n              <input\n                type=\"text\"\n                [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n                (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n                placeholder=\"Enter {{ key }}\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n    @defer (when getProperties()) {\n      <div>\n        <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <select\n              *ngIf=\"prop.type === 'select'\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            >\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n            </select>\n            <input\n              *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n              (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n            />\n\n            <div class=\"flex-container\">\n              <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n                <input\n                  type=\"color\"\n                  [ngModel]=\"selectedElement()?.fontColor\"\n                  (ngModelChange)=\"setValueByPath('fontColor', $event, prop.isTranslate)\"\n                >\n              </div>\n              <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n                <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n                <input\n                  type=\"text\"\n                  [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n                  (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n                />\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n              <button\n                type=\"button\"\n                class=\"toggle-button\"\n                (click)=\"duplicateField(selectedElement())\"\n              >\n              {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n              </button>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    }\n  </div>\n\n  <div class=\"button-container\" *ngIf=\"!templateSelected\">\n    <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n    <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n  </div>\n\n  <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n    <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n  </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{margin-left:10px;cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i4.NgClass, i4.NgForOf, i4.NgIf, i5.NgSelectOption, i5.ɵNgSelectMultipleOption, i5.DefaultValueAccessor, i5.NumberValueAccessor, i5.RangeValueAccessor, i5.SelectControlValueAccessor, i5.NgControlStatus, i5.MinValidator, i5.NgModel, Promise.resolve().then(function () { return searchBox_component; }).then(m => m.NxtSearchBox), GetValueByPathPipe, NxtCustomTranslatePipe], () => [i4.NgClass, i4.NgIf, Promise.resolve().then(function () { return imageCropper_component; }).then(m => m.ImageCropperComponent), NxtCustomTranslatePipe], () => [i4.NgForOf, i4.NgIf, i5.DefaultValueAccessor, i5.NgControlStatus, i5.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe], () => [i4.NgForOf, i4.NgIf, i5.NgSelectOption, i5.ɵNgSelectMultipleOption, i5.DefaultValueAccessor, i5.SelectControlValueAccessor, i5.NgControlStatus, i5.NgModel, GetValueByPathPipe, NxtCustomTranslatePipe]] });
 }
 i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return searchBox_component; }).then(m => m.NxtSearchBox), Promise.resolve().then(function () { return imageCropper_component; }).then(m => m.ImageCropperComponent)], resolveMetadata: (NxtSearchBox, ImageCropperComponent) => ({ decorators: [{
                 type: Component,
-                args: [{ selector: 'app-properties', standalone: true, imports: [CommonModule, FormsModule, ImageCropperComponent, NxtSearchBox, NgClass, NgFor, NgIf, GetValueByPathPipe, NxtCustomTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n    @defer (when getProperties()) {\n      <div>\n        @defer (when selectedElement()?.type === 'Image') {\n          <image-cropper\n            *ngIf=\"selectedElement().imageData\"\n            [imageBase64]=\"selectedElement().orgImageData\"\n            [disabled]=\"false\"\n            [alignImage]=\"alignImage\"\n            [roundCropper]=\"roundCropper\"\n            [backgroundColor]=\"'white'\"\n            imageAltText=\"Alternative image text\"\n            [allowMoveImage]=\"false\"\n            [hideResizeSquares]=\"false\"\n            [canvasRotation]=\"canvasRotation()\"\n            [aspectRatio]=\"aspectRatio\"\n            [containWithinAspectRatio]=\"false\"\n            [maintainAspectRatio]=\"false\"\n            [cropperStaticWidth]=\"cropperStaticWidth\"\n            [cropperStaticHeight]=\"cropperStaticHeight\"\n            [cropperMinWidth]=\"cropperMinWidth\"\n            [cropperMinHeight]=\"cropperMinHeight\"\n            [cropperMaxWidth]=\"cropperMaxWidth\"\n            [cropperMaxHeight]=\"cropperMaxHeight\"\n            [resetCropOnAspectRatioChange]=\"true\"\n            [(cropper)]=\"cropper\"\n            [(transform)]=\"transform\"\n            [onlyScaleDown]=\"true\"\n            output=\"blob\"\n            format=\"png\"\n            (imageCropped)=\"imageCropped($event)\"\n            (cropperReady)=\"cropperReady($event)\"\n          ></image-cropper>\n          <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n        }\n        <div *ngIf=\"selectedElement()?.type === 'Book'\">\n          <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n          <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n            <nxt-search-box\n              [question]=\"selectedElement()\"\n              [apiMeta]=\"bookSubtext()\"\n              [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n              (searchValueChange)=\"childEventCapture($event.value)\"\n            ></nxt-search-box>\n            <div class=\"link-icon\">\n              <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n              <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n                <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n                <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n                <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n                <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n                <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n            <input *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              [class.read-only]=\"selectedElement()?.readOnly\"\n              [readonly]=\"selectedElement()?.readOnly\"\n            />\n            <input *ngIf=\"prop.type === 'number'\"\n              type=\"number\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            />\n            <select *ngIf=\"prop.type === 'select'\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            >\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n            </select>\n            <div *ngIf=\"prop.type === 'checkbox'\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n              />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n            </div>\n            <div *ngIf=\"prop.type === 'subQuestion'\">\n              <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n                <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n                />\n              </div>\n              <div\n                *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n              >\n                <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                  <div class=\"form-group\">\n                    <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                    <div *ngIf=\"subProp.type === 'array'\">\n                      <div *ngFor=\"let column of filteredColumns()\">\n                        <label>\n                          <input\n                            type=\"checkbox\"\n                            [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                            (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n                          >\n                          {{ column.apiName }}\n                        </label>\n                      </div>\n                    </div>\n                    <div *ngIf=\"subProp.type === 'radio'\">\n                      <div *ngFor=\"let column of filteredColumns()\">\n                        <label>\n                          <input\n                            type=\"radio\"\n                            [name]=\"subProp.key\"\n                            [value]=\"column.apiName\"\n                            [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n                            (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n                          >\n                          {{ column.apiName }}\n                        </label>\n                      </div>\n                    </div>\n                    <input\n                      *ngIf=\"subProp.type === 'text'\"\n                      type=\"text\"\n                      [placeholder]=\"subProp.placeholder\"\n                      [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n                      (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n                    />\n                    <input\n                      *ngIf=\"subProp.type === 'boolean'\"\n                      type=\"checkbox\"\n                      [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n                      (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n                    />\n                    <select\n                      *ngIf=\"subProp.type === 'select'\"\n                      [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n                      (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n                    >\n                      <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n                    </select>\n                    <input\n                      *ngIf=\"subProp.type === 'checkbox'\"\n                      type=\"checkbox\"\n                      [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n                      (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'align'\">\n              <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n                <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n              </button>\n            </div>\n            <div *ngIf=\"prop.type === 'style'\">\n              <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n                <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n              </button>\n            </div>\n            <div *ngIf=\"prop.type === 'color'\">\n              <input\n                type=\"color\"\n                [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n                (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              />\n            </div>\n            <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n              <div class=\"form-header\">\n                <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n                <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n              </div>\n              <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n                <div class=\"form-group\">\n                  <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n                  <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n                    <option value=\"GET\">GET</option>\n                    <option value=\"POST\">POST</option>\n                    <option value=\"PUT\">PUT</option>\n                    <option value=\"DELETE\">DELETE</option>\n                  </select>\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n                  <input type=\"color\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n                  <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n                  <span>{{ btn.borderRadius }}px</span>\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n                  <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n                  <input type=\"color\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n                  <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n                  <span>{{ btn.positionPercent }}%</span>\n                </div>\n                <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    }\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n    @defer (when getProperties()) {\n      <div>\n        <label>Label Id</label>\n        <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n          {{ headerSelect() ? bookId() : selectedElement()?.id }}\n        </div>\n        <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label  *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n                  />\n                  {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n                </label>\n              </div>\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n                  />\n                  {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n                </label>\n              </div>\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n                  />\n                  {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n                </label>\n              </div>\n            </div>\n            <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n              <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n                <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),  prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n                  <input type=\"text\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event\" placeholder=\"Option\" class=\"options\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()[prop.key], option.id)\">\n                  <span class=\"drag-handle\">\u2630</span>\n                </div>\n              </div>\n              <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n                <div class=\"add-varient\">\n                  <span class=\"text-lg\">+</span>\n                  <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n                </div>\n              </button>\n            </div>\n            <input *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              [class.read-only]=\"selectedElement()?.readOnly\"\n              [readonly]=\"selectedElement()?.readOnly\"\n            />\n            <div *ngIf=\"prop.type === 'subQuestion'\">\n              <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n                <div class=\"head-elements\">Sub Text</div>\n                <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                  alt=\"Toggle Arrow\" class=\"arrow-icon\">\n              </div>\n              <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n                <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                  <div class=\"form-group\">\n                    <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                    <input *ngIf=\"subProp.type === 'text'\"\n                    type=\"text\"\n                    [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getOptimizedSubPropValue(subProp)\"\n                    (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n                    [class.read-only]=\"selectedElement()?.readOnly\"\n                    [readonly]=\"selectedElement()?.readOnly\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'checkbox'\">\n              <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n              />\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n          <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n          <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n        </div>\n        <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n          <div class=\"form-group\">\n            <div *ngFor=\"let key of getStyleKeys()\">\n              <label>{{ key }}</label>\n              <input\n                type=\"text\"\n                [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n                (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n                placeholder=\"Enter {{ key }}\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n    @defer (when getProperties()) {\n      <div>\n        <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <select\n              *ngIf=\"prop.type === 'select'\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            >\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n            </select>\n            <input\n              *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n              (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n            />\n\n            <div class=\"flex-container\">\n              <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n                <input\n                  type=\"color\"\n                  [ngModel]=\"selectedElement()?.fontColor\"\n                  (ngModelChange)=\"setValueByPath('fontColor', $event, prop.isTranslate)\"\n                >\n              </div>\n              <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n                <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n                <input\n                  type=\"text\"\n                  [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n                  (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n                />\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n              <button\n                type=\"button\"\n                class=\"toggle-button\"\n                (click)=\"duplicateField(selectedElement())\"\n              >\n              {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n              </button>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    }\n  </div>\n\n  <div class=\"button-container\" *ngIf=\"!templateSelected\">\n    <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n    <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n  </div>\n\n  <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n    <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n  </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{margin-left:10px;cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}\n"] }]
+                args: [{ selector: 'app-properties', standalone: true, imports: [CommonModule, FormsModule, ImageCropperComponent, NxtSearchBox, NgClass, NgFor, NgIf, GetValueByPathPipe, NxtCustomTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'attributes'}\" (click)=\"setActiveTab('attributes')\">{{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}</div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'property'}\" (click)=\"setActiveTab('property')\">{{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}</div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab() === 'appearance'}\" (click)=\"setActiveTab('appearance')\">{{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}</div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'attributes'\">\n    @defer (when getProperties()) {\n      <div>\n        @defer (when selectedElement()?.type === 'Image') {\n          <image-cropper\n            *ngIf=\"selectedElement().imageData\"\n            [imageBase64]=\"selectedElement().orgImageData\"\n            [disabled]=\"false\"\n            [alignImage]=\"alignImage\"\n            [roundCropper]=\"roundCropper\"\n            [backgroundColor]=\"'white'\"\n            imageAltText=\"Alternative image text\"\n            [allowMoveImage]=\"false\"\n            [hideResizeSquares]=\"false\"\n            [canvasRotation]=\"canvasRotation()\"\n            [aspectRatio]=\"aspectRatio\"\n            [containWithinAspectRatio]=\"false\"\n            [maintainAspectRatio]=\"false\"\n            [cropperStaticWidth]=\"cropperStaticWidth\"\n            [cropperStaticHeight]=\"cropperStaticHeight\"\n            [cropperMinWidth]=\"cropperMinWidth\"\n            [cropperMinHeight]=\"cropperMinHeight\"\n            [cropperMaxWidth]=\"cropperMaxWidth\"\n            [cropperMaxHeight]=\"cropperMaxHeight\"\n            [resetCropOnAspectRatioChange]=\"true\"\n            [(cropper)]=\"cropper\"\n            [(transform)]=\"transform\"\n            [onlyScaleDown]=\"true\"\n            output=\"blob\"\n            format=\"png\"\n            (imageCropped)=\"imageCropped($event)\"\n            (cropperReady)=\"cropperReady($event)\"\n          ></image-cropper>\n          <div *ngIf=\"selectedElement().imageData\" style=\"display: flex; gap: 2px;\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [ngClass]=\"{'enabled': transform().flipH}\" title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [ngClass]=\"{'enabled': transform().flipV}\" title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n        }\n        <div *ngIf=\"selectedElement()?.type === 'Book'\">\n          <label class=\"text-sm\">{{ 'SEARCH_BOOK' | nxtCustomTranslate : 'Search Book' }}</label>\n          <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n            <nxt-search-box\n              [question]=\"selectedElement()\"\n              [apiMeta]=\"bookSubtext()\"\n              [placeHolderText]=\"'SEARCH' | nxtCustomTranslate : 'Search...'\"\n              (searchValueChange)=\"childEventCapture($event.value)\"\n            ></nxt-search-box>\n            <div class=\"link-icon\">\n              <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n              <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen()\" #dropdown>\n                <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().endpoint\" (ngModelChange)=\"updateBookSubtext('endpoint', $event)\" />\n                <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().variable\" (ngModelChange)=\"updateBookSubtext('variable', $event)\" />\n                <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n                <input type=\"text\" [ngModel]=\"fieldAsString()\" (ngModelChange)=\"updateField($event)\" />\n                <label>{{ 'DEFAULT_FIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n                <input type=\"text\" [ngModel]=\"bookSubtext().defaultField\" (ngModelChange)=\"updateBookSubtext('defaultField', $event)\" />\n              </div>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngFor=\"let prop of getProperties()?.elementProps; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <div *ngIf=\"prop.key === 'helpText' && selectedElement()?.helpText\">{{ selectedElement()?.helpText }}</div>\n            <input *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              [class.read-only]=\"selectedElement()?.readOnly\"\n              [readonly]=\"selectedElement()?.readOnly\"\n            />\n            <input *ngIf=\"prop.type === 'number'\"\n              type=\"number\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            />\n            <select *ngIf=\"prop.type === 'select'\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            >\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n            </select>\n            <div *ngIf=\"prop.type === 'checkbox'\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n              />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n            </div>\n            <div *ngIf=\"prop.type === 'subQuestion'\">\n              <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n                <div>{{ prop.labelPath | nxtCustomTranslate : prop.label }}</div>\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n                />\n              </div>\n              <div\n                *ngIf=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n              >\n                <div *ngFor=\"let subProp of prop.subQuestion\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                  <div class=\"form-group\">\n                    <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                    <div *ngIf=\"subProp.type === 'array'\">\n                      <div *ngFor=\"let column of filteredColumns()\">\n                        <label>\n                          <input\n                            type=\"checkbox\"\n                            [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                            (change)=\"onCheckboxChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName, $event.target.checked)\"\n                          >\n                          {{ column.apiName }}\n                        </label>\n                      </div>\n                    </div>\n                    <div *ngIf=\"subProp.type === 'radio'\">\n                      <div *ngFor=\"let column of filteredColumns()\">\n                        <label>\n                          <input\n                            type=\"radio\"\n                            [name]=\"subProp.key\"\n                            [value]=\"column.apiName\"\n                            [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) === column.apiName\"\n                            (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\"\n                          >\n                          {{ column.apiName }}\n                        </label>\n                      </div>\n                    </div>\n                    <input\n                      *ngIf=\"subProp.type === 'text'\"\n                      type=\"text\"\n                      [placeholder]=\"subProp.placeholder\"\n                      [ngModel]=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key) : (selectedElement() | getValueByPath : subProp.key)) : (selectedElement() | getValueByPath : subProp.key)\"\n                      (ngModelChange)=\"selectedElement()?.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event,false, prop.isTranslate) : setValueByPath(subProp.key, $event)) : setValueByPath(subProp.key, $event, prop.isTranslate)\"\n                    />\n                    <input\n                      *ngIf=\"subProp.type === 'boolean'\"\n                      type=\"checkbox\"\n                      [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n                      (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n                    />\n                    <select\n                      *ngIf=\"subProp.type === 'select'\"\n                      [ngModel]=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? (getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, subProp.isTableColumn)) : (selectedElement() | getValueByPath : subProp.key))\"\n                      (ngModelChange)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event, prop.isTranslate))\"\n                    >\n                      <option *ngFor=\"let option of subProp.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n                    </select>\n                    <input\n                      *ngIf=\"subProp.type === 'checkbox'\"\n                      type=\"checkbox\"\n                      [checked]=\"selectedElement() | getValueByPath : subProp.key\"\n                      (change)=\"setValueByPath(subProp.key, $event.target.checked)\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'align'\">\n              <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" [ngClass]=\"{'active': selectedElement()?.textAlign === option.value}\" [title]=\"option.value\">\n                <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n              </button>\n            </div>\n            <div *ngIf=\"prop.type === 'style'\">\n              <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\" [ngClass]=\"{'active': isStyleActive(option.value)}\" [title]=\"option.value\">\n                <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n              </button>\n            </div>\n            <div *ngIf=\"prop.type === 'color'\">\n              <input\n                type=\"color\"\n                [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n                (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              />\n            </div>\n            <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n              <div class=\"form-header\">\n                <label class=\"form-label\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n                <button (click)=\"addNewButton()\" class=\"add-button\">+ {{ 'ADD_BUTTON' | nxtCustomTranslate : 'Add Button' }}</button>\n              </div>\n              <div *ngFor=\"let btn of book()?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n                <div class=\"form-group\">\n                  <label>{{ 'BUTTON_NAME' | nxtCustomTranslate : 'Button Name' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event,true)\" placeholder=\"Enter button name\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'EVENT_NAME' | nxtCustomTranslate : 'Event Name' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'ALT' | nxtCustomTranslate : 'Alt' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'END_POINT' | nxtCustomTranslate : 'Endpoint' }}</label>\n                  <input type=\"text\" [ngModel]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'METHOD' | nxtCustomTranslate : 'Method' }}</label>\n                  <select [ngModel]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n                    <option value=\"GET\">GET</option>\n                    <option value=\"POST\">POST</option>\n                    <option value=\"PUT\">PUT</option>\n                    <option value=\"DELETE\">DELETE</option>\n                  </select>\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BACKGROUND_COLOR' | nxtCustomTranslate : 'Background Color' }}</label>\n                  <input type=\"color\" [ngModel]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BORDER_RADIUS' | nxtCustomTranslate : 'Border Radius' }}</label>\n                  <input type=\"range\" min=\"0\" max=\"50\" [ngModel]=\"btn.borderRadius\" (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n                  <span>{{ btn.borderRadius }}px</span>\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'BUTTON_WIDTH_PX' | nxtCustomTranslate : 'Button Width (px)' }}</label>\n                  <input type=\"number\" [ngModel]=\"btn.width\" (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'TEXT_COLOR' | nxtCustomTranslate : 'Text Color' }}</label>\n                  <input type=\"color\" [ngModel]=\"btn.textColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n                </div>\n                <div class=\"form-group\">\n                  <label>{{ 'POSITION_PERCENT' | nxtCustomTranslate : 'Position (%)' }}</label>\n                  <input type=\"range\" min=\"0\" max=\"100\" [ngModel]=\"btn.positionPercent\" (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n                  <span>{{ btn.positionPercent }}%</span>\n                </div>\n                <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 {{ 'REMOVE' | nxtCustomTranslate : 'Remove' }}</button>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    }\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'property'\">\n    @defer (when getProperties()) {\n      <div>\n        <label>Label Id</label>\n        <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n          {{ headerSelect() ? bookId() : selectedElement()?.id }}\n        </div>\n        <ng-container *ngFor=\"let prop of getProperties()?.fieldProps; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label  *ngIf=\"prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isOptional')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isOptional', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isOptional', $event)\"\n                  />\n                  {{ 'REQUIRED' | nxtCustomTranslate : 'Required' }}\n                </label>\n              </div>\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isReadOnly')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isReadOnly', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isReadOnly', $event)\"\n                  />\n                  {{ 'READ_ONLY' | nxtCustomTranslate : 'Read Only' }}\n                </label>\n              </div>\n              <div class=\"toggle-item\">\n                <label class=\"toggle-label\">\n                  <input type=\"checkbox\" \n                  [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', true) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : 'isHidden')\"\n                  (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), 'isHidden', $event, true, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange('isHidden', $event)\"\n                  />\n                  {{ 'IS_HIDE' | nxtCustomTranslate : 'Is Hide' }}\n                </label>\n              </div>\n            </div>\n            <div *ngIf=\" prop.type === 'checkbox' || prop.type === 'radio' || prop.key === 'options'\" class=\"options-container\">\n              <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n                <div *ngFor=\"let option of selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),  prop.key, true) : selectedElement()[prop.key] ; let i = index\" class=\"option-items\" [attr.data-id]=\"option.id\" draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n                  <input type=\"text\" [ngModel]=\"option.value\" (ngModelChange)=\"option.value = $event; optionTranslationUpdate(option,$event)\" placeholder=\"Option\" class=\"options\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement()[prop.key], option.id)\">\n                  <span class=\"drag-handle\">\u2630</span>\n                </div>\n              </div>\n              <button (click)=\"addOption(selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), prop.key, true) : selectedElement()[prop.key])\">\n                <div class=\"add-varient\">\n                  <span class=\"text-lg\">+</span>\n                  <span>{{ 'ADD' | nxtCustomTranslate : 'Add' }}</span>\n                </div>\n              </button>\n            </div>\n            <input *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"headerSelect() ? book().records[0].title : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"headerSelect() ? updateTitle($event) : (selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n              [class.read-only]=\"selectedElement()?.readOnly\"\n              [readonly]=\"selectedElement()?.readOnly\"\n            />\n            <div *ngIf=\"prop.type === 'subQuestion'\">\n              <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n                <div class=\"head-elements\">Sub Text</div>\n                <img [src]=\"isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                  alt=\"Toggle Arrow\" class=\"arrow-icon\">\n              </div>\n              <div *ngIf=\"isExpanded\" style=\"border: 1px solid #ddd; border-radius: 4px;\">\n                <div *ngFor=\"let subProp of prop.subQuestion; trackBy: trackByProp\" style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                  <div class=\"form-group\">\n                    <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                    <input *ngIf=\"subProp.type === 'text'\"\n                    type=\"text\"\n                    [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getOptimizedSubPropValue(subProp)\"\n                    (input)=\"(selectedElement()?.type === 'Table' && (subProp.targetArray || subProp.isTableColumn)) ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn(), subProp.key, $event.target.value, subProp.isTableColumn, prop.isTranslate) : setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\"\n                    [class.read-only]=\"selectedElement()?.readOnly\"\n                    [readonly]=\"selectedElement()?.readOnly\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value, prop.isTranslate)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'checkbox'\">\n              <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</span>\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn) : (selectedElement() | getValueByPath : prop.key)) : (selectedElement() | getValueByPath : prop.key)\"\n                (change)=\"selectedElement()?.type === 'Table' ? (prop.targetArray || prop.isTableColumn ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : onToggleChange(prop.key, $event)) : onToggleChange(prop.key, $event)\"\n              />\n            </div>\n          </div>\n        </ng-container>\n        <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n          <div class=\"head-elements\">{{ 'STYLE' | nxtCustomTranslate : 'Style' }}</div>\n          <img [src]=\"isStyleExpanded() ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\" alt=\"Toggle Arrow\" class=\"arrow-icon\">\n        </div>\n        <div *ngIf=\"isStyleExpanded()\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n          <div class=\"form-group\">\n            <div *ngFor=\"let key of getStyleKeys()\">\n              <label>{{ key }}</label>\n              <input\n                type=\"text\"\n                [value]=\"selectedElement()?.type === 'Table' && selectColumn() ? getValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(),'style.' + key, true) : (selectedElement() | getValueByPath : 'style.' + key)\"\n                (input)=\"(selectedElement()?.type === 'Table' && selectColumn() ) ? updateValueByArrayPath('fieldsMeta', 'uniqueIdentifier', selectColumn(), 'style.' + key, $event.target.value, true) : setValueByPath('style.' + key, $event.target.value)\"\n                placeholder=\"Enter {{ key }}\"\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab() === 'appearance'\">\n    @defer (when getProperties()) {\n      <div>\n        <ng-container *ngFor=\"let prop of getProperties()?.appearance; trackBy: trackByProp\">\n          <div class=\"form-group\">\n            <label class=\"text-sm\">{{ prop.labelPath | nxtCustomTranslate : prop.label }}</label>\n            <select\n              *ngIf=\"prop.type === 'select'\"\n              [ngModel]=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? (getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, prop.isTableColumn)) : (selectedElement() | getValueByPath : prop.key))\"\n              (ngModelChange)=\"(selectedElement()?.type === 'Table' && (prop.targetArray || prop.isTableColumn) ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn(), prop.key, $event, prop.isTableColumn, prop.isTranslate) : setValueByPath(prop.key, $event, prop.isTranslate))\"\n            >\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">{{ option.labelPath | nxtCustomTranslate : option.label }}</option>\n            </select>\n            <input\n              *ngIf=\"prop.type === 'text'\"\n              type=\"text\"\n              [placeholder]=\"prop.placeholder\"\n              [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n              (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n            />\n\n            <div class=\"flex-container\">\n              <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n                <input\n                  type=\"color\"\n                  [ngModel]=\"selectedElement()?.fontColor\"\n                  (ngModelChange)=\"setValueByPath('fontColor', $event, prop.isTranslate)\"\n                >\n              </div>\n              <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n                <span>{{ 'HEX_CODE' | nxtCustomTranslate : 'HEX Code' }}</span>\n                <input\n                  type=\"text\"\n                  [ngModel]=\"selectedElement() | getValueByPath : prop.key\"\n                  (ngModelChange)=\"setValueByPath(prop.key, $event, prop.isTranslate)\"\n                />\n              </div>\n            </div>\n            <div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n              <button\n                type=\"button\"\n                class=\"toggle-button\"\n                (click)=\"duplicateField(selectedElement())\"\n              >\n              {{ 'ADD_DUPLICATE' | nxtCustomTranslate : 'Add Duplicate' }}\n              </button>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    }\n  </div>\n\n  <div class=\"button-container\" *ngIf=\"!templateSelected\">\n    <button class=\"cancel-btn\" (click)=\"onCancel()\">{{ 'CANCEL' | nxtCustomTranslate : 'Cancel' }}</button>\n    <button class=\"save-btn\" (click)=\"handleButtonClick()\">{{ 'SAVE' | nxtCustomTranslate : 'Save' }}</button>\n  </div>\n\n  <div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n    <button class=\"save-btn\" (click)=\"handleTemplateSave()\">{{ 'SAVE_TEMPLATE' | nxtCustomTranslate : 'Save Template' }}</button>\n  </div>\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{margin-left:10px;cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}\n"] }]
             }], ctorParameters: () => [{ type: FormBuilderService }, { type: TemplateService }, { type: TranslationService }], propDecorators: { templateSelected: [{
                     type: Input
                 }], selectedElementType: [{
@@ -65009,32 +64786,6 @@ class ElementComponent {
         this.formElements = [];
         this.formBuilderService.clearElements();
         this.formBuilderService.intializeBook(this.bookletJSON);
-        const bookQuestionsMap = this.bookletJSON.bookQuestionsMap;
-        const bookQuestionsMapKeys = Object.keys(bookQuestionsMap);
-        if (bookQuestionsMapKeys.length === 0)
-            return;
-        for (const key of bookQuestionsMapKeys) {
-            const subQuestions = bookQuestionsMap[key]?.subQuestions;
-            if (Array.isArray(subQuestions)) {
-                subQuestions.forEach((subQuestion) => {
-                    // AP-04APR24 If subQuestion.style exists as a string and is empty, replace it with a default style object
-                    if (typeof subQuestion.style === "string" &&
-                        subQuestion.style.trim() === "") {
-                        subQuestion.style = {
-                            labelClass: null,
-                            labelStyle: null,
-                            labelValueStyle: null,
-                            inputClass: null,
-                            inputStyle: null,
-                            showLabel: true,
-                            bookStyle: null,
-                            direction: "ltr",
-                            questionStyle: null,
-                        };
-                    }
-                });
-            }
-        }
         this.formElements = this.formBuilderService.getElements();
     }
     // Add this method to handle element selection
@@ -65311,7 +65062,10 @@ class ElementComponent {
                     opt.value = this.translationService.formBuilderTranslate(`${opt.id}.value`, this.languageCode) ? this.translationService.formBuilderTranslate(`${opt.id}.value`, this.languageCode) : null;
                 });
             }
-            if (element.type === 'Table') {
+            if (element.type === 'Table' && element?.fieldsMeta) {
+                if (!Array.isArray(element?.fieldsMeta) && typeof element?.fieldsMeta === 'string') {
+                    element.fieldsMeta = JSON.parse(element?.fieldsMeta);
+                }
                 element?.fieldsMeta?.forEach(field => {
                     keysToTranslate.forEach(key => {
                         if (key !== 'question')
@@ -65333,7 +65087,7 @@ class ElementComponent {
         this.translationService.setFormBuilderLanguage(this.languageCode);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FormBuilderService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n   <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\"\n        (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <app-custom-dropdown \n          [options]=\"langOption\"  \n          [selectedValue]=\"languageCode\"\n          [from]=\"'normalDropDown'\"\n          [mode]=\"'edit'\"\n          (valueChange)=\"langChangeEmit($event.value)\"\n          style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </app-custom-dropdown>\n    </div>\n\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n      <!-- TextBox -->\n      <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n       <!-- MSM-09JUL25 Icon-selectir Element -->\n         <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n                <div class=\"choose-icon-placeholder\">\n                </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"getFontStyles(field)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' | nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date & Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\" [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\" [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{ option.value\n                }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable  isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true [selectedColumn]=\"selectedColumn\"\n                (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:13px}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:19px;height:19px;margin-top:-5px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n   <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\"\n        (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <app-custom-dropdown \n          [options]=\"langOption\"  \n          [selectedValue]=\"languageCode\"\n          [from]=\"'normalDropDown'\"\n          [mode]=\"'edit'\"\n          (valueChange)=\"langChangeEmit($event.value)\"\n          style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </app-custom-dropdown>\n    </div>\n\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- TextBox -->\n      <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n       <!-- MSM-09JUL25 Icon-selectir Element -->\n         <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n                <div class=\"choose-icon-placeholder\">\n                </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"getFontStyles(field)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' | nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date & Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\" [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\" [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{ option.value\n                }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable  isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true [selectedColumn]=\"selectedColumn\"\n                (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:13px}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:19px;height:19px;margin-top:-5px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
             type: Component,
@@ -65344,7 +65098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NxtDatatable,
                         CustomDropdownComponent,
                         NxtCustomTranslatePipe
-                    ], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n   <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\"\n        (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <app-custom-dropdown \n          [options]=\"langOption\"  \n          [selectedValue]=\"languageCode\"\n          [from]=\"'normalDropDown'\"\n          [mode]=\"'edit'\"\n          (valueChange)=\"langChangeEmit($event.value)\"\n          style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </app-custom-dropdown>\n    </div>\n\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n      <!-- TextBox -->\n      <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n       <!-- MSM-09JUL25 Icon-selectir Element -->\n         <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n                <div class=\"choose-icon-placeholder\">\n                </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"getFontStyles(field)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' | nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date & Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\" [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\" [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{ option.value\n                }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable  isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true [selectedColumn]=\"selectedColumn\"\n                (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:13px}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:19px;height:19px;margin-top:-5px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"] }]
+                    ], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n   <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\"\n        (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <app-custom-dropdown \n          [options]=\"langOption\"  \n          [selectedValue]=\"languageCode\"\n          [from]=\"'normalDropDown'\"\n          [mode]=\"'edit'\"\n          (valueChange)=\"langChangeEmit($event.value)\"\n          style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </app-custom-dropdown>\n    </div>\n\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- TextBox -->\n      <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n       <!-- MSM-09JUL25 Icon-selectir Element -->\n         <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n                <div class=\"choose-icon-placeholder\">\n                </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"getFontStyles(field)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' | nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date & Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\" [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\" [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{ option.value\n                }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable  isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true [selectedColumn]=\"selectedColumn\"\n                (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n        (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:13px}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:19px;height:19px;margin-top:-5px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FormBuilderService }, { type: TranslationService }], propDecorators: { bookletJSON: [{
                 type: Input
             }], bookletId: [{
@@ -65403,17 +65157,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 function initializeApp(translationService) {
     return () => translationService.load();
 }
-// HA 19DEC23 variable created for translation
-const languages = [
-    // { lang: 'EN', flag: 'assets/images/en.i18n.png', file: enI18n },
-    { lang: 'EN', file: enI18n$1 },
-    { lang: 'TAM', file: tamI18n$1 },
-    { lang: 'AR', file: arI18n$1 }
-];
 class NxtAppModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NxtAppModule, bootstrap: [NxtAppComponent], declarations: [NxtAppComponent,
-            I18nComponent], imports: [CommonModule, FormsModule,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NxtAppModule, bootstrap: [NxtAppComponent], declarations: [NxtAppComponent], imports: [CommonModule, FormsModule,
             NxtDatatable,
             NxtSearchBox,
             ListViewFilterComponent,
@@ -65424,7 +65170,7 @@ class NxtAppModule {
             NxtButtonComponent,
             IconSelectorComponent, //MSM10JUL25 import icon selector component
             PdfDesignerComponent,
-            FormComponent, I18nModule], exports: [NxtAppComponent,
+            FormComponent], exports: [NxtAppComponent,
             QuestionnaireComponent,
             BookletComponent,
             NxtDatatable,
@@ -65435,8 +65181,6 @@ class NxtAppModule {
             IconSelectorComponent, //MSM10JUL25 export icon selector component
             PdfDesignerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtAppModule, providers: [
-            I18nService,
-            I18nPipe,
             FormBuilderService, //AP 22JAN2025 Added the FormBuilderService
             PdfDesignerService,
             TranslationService,
@@ -65457,15 +65201,12 @@ class NxtAppModule {
             NxtButtonComponent,
             IconSelectorComponent, //MSM10JUL25 import icon selector component
             PdfDesignerComponent,
-            FormComponent,
-            I18nModule.forRoot(languages)] });
+            FormComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtAppModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [NxtAppComponent,
-                        I18nComponent
-                    ],
+                    declarations: [NxtAppComponent],
                     imports: [
                         CommonModule, FormsModule,
                         NxtDatatable,
@@ -65478,8 +65219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         NxtButtonComponent,
                         IconSelectorComponent, //MSM10JUL25 import icon selector component
                         PdfDesignerComponent,
-                        FormComponent,
-                        I18nModule.forRoot(languages)
+                        FormComponent
                     ],
                     bootstrap: [NxtAppComponent],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -65495,8 +65235,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         PdfDesignerComponent,
                     ],
                     providers: [
-                        I18nService,
-                        I18nPipe,
                         FormBuilderService, //AP 22JAN2025 Added the FormBuilderService
                         PdfDesignerService,
                         TranslationService,
@@ -65518,5 +65256,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BookletComponent, FormComponent, I18nComponent, I18nPipe, IconSelectorComponent, ListViewFilterComponent, NxtAppComponent, NxtAppModule, NxtAppService, NxtButtonComponent, NxtDatatable, NxtInput, NxtSearchBox, PdfDesignerComponent, QuestionnaireComponent, SalesforceService, initializeApp };
+export { BookletComponent, FormComponent, IconSelectorComponent, ListViewFilterComponent, NxtAppComponent, NxtAppModule, NxtAppService, NxtButtonComponent, NxtDatatable, NxtInput, NxtSearchBox, PdfDesignerComponent, QuestionnaireComponent, SalesforceService, initializeApp };
 //# sourceMappingURL=rangertechnologies-ngnxt.mjs.map