@rangertechnologies/ngnxt 2.1.178 → 2.1.180

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -1,16 +1,13 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, InjectionToken, EventEmitter, Inject, Output, Pipe, Optional, forwardRef, ChangeDetectionStrategy, Input, ViewChildren, ViewChild, HostListener, ViewEncapsulation, signal, HostBinding, NgModule, Directive, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Injectable, Component, InjectionToken, EventEmitter, Inject, Output, Pipe, Optional, forwardRef, ChangeDetectionStrategy, Input, ViewChildren, ViewChild, HostListener, ViewEncapsulation, signal, HostBinding, 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 moment from 'moment';
 import { Subject, BehaviorSubject, merge, fromEvent, catchError, of } from 'rxjs';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, NgIf } from '@angular/common';
-import { NgSelectModule } from '@ng-select/ng-select';
 import * as i5$1 from '@danielmoncada/angular-datetime-picker';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
-import * as i1$2 from 'ngx-quill';
-import { QuillEditorComponent, QuillModule } from 'ngx-quill';
+import { QuillEditorComponent } from 'ngx-quill';
 import Quill from 'quill';
 import { Mention } from 'quill-mention';
 import ImageResizor from 'quill-image-resizor';
@@ -27,7 +24,6 @@ import * as i1$1 from '@angular/router';
 import * as i6$1 from '@angular/platform-browser';
 import * as i8 from 'ngx-device-detector';
 import { takeUntil, first } from 'rxjs/operators';
-import { DragDropModule } from '@angular/cdk/drag-drop';
 import { v4 } from 'uuid';
 
 class NxtAppService {
@@ -4222,86 +4218,6 @@ icons['discard'] = `<svg *ngIf="isDiscardHovered" (click)="discardChanges()" wid
                   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"
                   fill="#FF3636" />
                 </svg>`;
-const QuillConfiguration = {
-    imageResizor: {},
-    toolbar: {
-        container: [
-            [{ 'font': fontFamilyArr }], //RS 17JAN2025  Added font family dropdown
-            ['bold', 'italic', 'underline', 'strike'],
-            ['blockquote', 'code-block'],
-            [{ header: [1, 2, 3, 4, 5, 6, false] }],
-            [{ list: 'ordered' }, { list: 'bullet' }],
-            [{ color: [] }, { background: [] }],
-            [{ align: [] }],
-            ['link', 'image', 'video'],
-            ['formula'],
-            ['clean'],
-            ['save', 'discard']
-        ],
-        handlers: {
-            save: function () {
-                const event = new CustomEvent('quill-save');
-                document.dispatchEvent(event);
-            },
-            discard: function () {
-                const event = new CustomEvent('quill-discard');
-                document.dispatchEvent(event);
-            }
-        }
-    },
-    mention: {
-        allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
-        mentionDenotationChars: ['@', '#'],
-        source: function (searchTerm, renderList) {
-            const values = [
-                { id: 1, value: 'User 1' },
-                { id: 2, value: 'User 2' },
-            ];
-            if (searchTerm.length === 0) {
-                renderList(values, searchTerm);
-            }
-            else {
-                const matches = values.filter((item) => item.value.toLowerCase().includes(searchTerm.toLowerCase()));
-                renderList(matches, searchTerm);
-            }
-        },
-    },
-};
-// SKS13JUN25 Without having save and discard button modules
-const EmptyQuillConfiguration = {
-    imageResizor: {},
-    toolbar: {
-        container: [
-            [{ 'font': fontFamilyArr }], //RS 17JAN2025  Added font family dropdown
-            ['bold', 'italic', 'underline', 'strike'],
-            ['blockquote', 'code-block'],
-            [{ header: [1, 2, 3, 4, 5, 6, false] }],
-            [{ list: 'ordered' }, { list: 'bullet' }],
-            [{ color: [] }, { background: [] }],
-            [{ align: [] }],
-            ['link', 'image', 'video'],
-            ['formula'],
-            ['clean'],
-        ],
-    },
-    mention: {
-        allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
-        mentionDenotationChars: ['@', '#'],
-        source: function (searchTerm, renderList) {
-            const values = [
-                { id: 1, value: 'User 1' },
-                { id: 2, value: 'User 2' },
-            ];
-            if (searchTerm.length === 0) {
-                renderList(values, searchTerm);
-            }
-            else {
-                const matches = values.filter((item) => item.value.toLowerCase().includes(searchTerm.toLowerCase()));
-                renderList(matches, searchTerm);
-            }
-        },
-    },
-};
 function getFormArray(size) {
     const arr = [];
     for (let i = 0; i < size; i++) {
@@ -6522,8 +6438,6 @@ class NxtInput {
     // Internal state
     dateSelected;
     timeSelected;
-    quillConfiguration = QuillConfiguration;
-    emptyQuillConfiguration = EmptyQuillConfiguration;
     viewEdit = false;
     originalValue; // To store the original value when entering view edit mode
     isSaveHovered = false;
@@ -6623,6 +6537,96 @@ class NxtInput {
         document.removeEventListener('quill-save', this.saveChanges.bind(this));
         document.removeEventListener('quill-discard', this.discardChanges.bind(this));
     }
+    // SKS14JUN25  Dynamically load Quill editor toolbar
+    getQuillModules(questionId) {
+        if (this.viewEdit) {
+            return {
+                imageResizor: {},
+                toolbar: {
+                    container: [
+                        [{ 'font': fontFamilyArr }], //RS 17JAN2025  Added font family dropdown
+                        ['bold', 'italic', 'underline', 'strike'],
+                        ['blockquote', 'code-block'],
+                        [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                        [{ list: 'ordered' }, { list: 'bullet' }],
+                        [{ color: [] }, { background: [] }],
+                        [{ align: [] }],
+                        ['link', 'image', 'video'],
+                        ['formula'],
+                        ['clean'],
+                        ['save', 'discard']
+                    ],
+                    handlers: {
+                        save: function () {
+                            const event = new CustomEvent('quill-save', {
+                                detail: { id: questionId } // You inject the correct ID directly here
+                            });
+                            document.dispatchEvent(event);
+                        },
+                        discard: function () {
+                            const event = new CustomEvent('quill-discard', {
+                                detail: { id: questionId }
+                            });
+                            document.dispatchEvent(event);
+                        }
+                    }
+                },
+                mention: {
+                    allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
+                    mentionDenotationChars: ['@', '#'],
+                    source: function (searchTerm, renderList) {
+                        const values = [
+                            { id: 1, value: 'User 1' },
+                            { id: 2, value: 'User 2' },
+                        ];
+                        if (searchTerm.length === 0) {
+                            renderList(values, searchTerm);
+                        }
+                        else {
+                            const matches = values.filter((item) => item.value.toLowerCase().includes(searchTerm.toLowerCase()));
+                            renderList(matches, searchTerm);
+                        }
+                    },
+                },
+            };
+        }
+        else {
+            return {
+                imageResizor: {},
+                toolbar: {
+                    container: [
+                        [{ 'font': fontFamilyArr }], //RS 17JAN2025  Added font family dropdown
+                        ['bold', 'italic', 'underline', 'strike'],
+                        ['blockquote', 'code-block'],
+                        [{ header: [1, 2, 3, 4, 5, 6, false] }],
+                        [{ list: 'ordered' }, { list: 'bullet' }],
+                        [{ color: [] }, { background: [] }],
+                        [{ align: [] }],
+                        ['link', 'image', 'video'],
+                        ['formula'],
+                        ['clean'],
+                    ],
+                },
+                mention: {
+                    allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
+                    mentionDenotationChars: ['@', '#'],
+                    source: function (searchTerm, renderList) {
+                        const values = [
+                            { id: 1, value: 'User 1' },
+                            { id: 2, value: 'User 2' },
+                        ];
+                        if (searchTerm.length === 0) {
+                            renderList(values, searchTerm);
+                        }
+                        else {
+                            const matches = values.filter((item) => item.value.toLowerCase().includes(searchTerm.toLowerCase()));
+                            renderList(matches, searchTerm);
+                        }
+                    },
+                },
+            };
+        }
+    }
     setupValidators() {
         const validators = [];
         if (this.required)
@@ -6739,7 +6743,7 @@ class NxtInput {
         }
     }
     updateControlState() {
-        const shouldDisable = this.mode !== 'edit' && !this.viewEdit;
+        const shouldDisable = this.mode !== 'edit' || this.question?.isReadOnly;
         this.setDisabledState(shouldDisable);
     }
     validate(control) {
@@ -6891,20 +6895,29 @@ class NxtInput {
         this.mode = 'edit';
         this.updateControlState(); // Update control state
     }
-    saveChanges() {
+    saveChanges = (event) => {
+        // SKS14JUN25 Emit save/discard event only if the current question was changed
+        if (event)
+            if (event.detail?.id !== this.question.id)
+                return;
         let ques = this.question;
         ques['singleFieldChange'] = true;
         this.inputValue.emit({ question: ques, value: this.value }); // Emit the updated value
         this.viewEdit = false; // Exit view edit mode
         this.mode = 'view'; // Switch back to view mode
         this.updateControlState(); // Update control state
-    }
-    discardChanges() {
+    };
+    discardChanges = (event) => {
+        // SKS14JUN25 Emit save/discard event only if the current question was changed
+        if (event)
+            if (event.detail?.id !== this.question.id)
+                return;
+        console.log("discardChanges");
         this.writeValue(this.originalValue); // Revert to original value
         this.viewEdit = false; // Exit view edit mode
         this.mode = 'view'; // Switch back to view mode
         this.updateControlState(); // Update control state
-    }
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtInput, deps: [{ token: i0.ElementRef }, { token: ChangeService }, { token: DataService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: NxtInput, isStandalone: true, selector: "nxt-input", inputs: { label: "label", labelFont: "labelFont", labelWeight: "labelWeight", inputWeight: "inputWeight", labelSize: "labelSize", inputValueSize: "inputValueSize", labelColor: "labelColor", showLabel: "showLabel", svgHeight: "svgHeight", svgWidth: "svgWidth", type: "type", inputIconRightSrc: "inputIconRightSrc", inputIconLeftSrc: "inputIconLeftSrc", required: "required", minLength: "minLength", pattern: "pattern", errorMessages: "errorMessages", maxLength: "maxLength", placeholder: "placeholder", inputBgColor: "inputBgColor", inputBorder: "inputBorder", placeholderColor: "placeholderColor", placeholderFont: "placeholderFont", placeholderWeight: "placeholderWeight", placeholderSize: "placeholderSize", inputTextColor: "inputTextColor", inputHeight: "inputHeight", inputWidth: "inputWidth", inputId: "inputId", inputBorderSize: "inputBorderSize", inputConfig: "inputConfig", confPassVal: "confPassVal", confPass: "confPass", mode: "mode", value: "value", question: "question", showSuggestion: "showSuggestion", ariaOwns: "ariaOwns", ariaHasPopup: "ariaHasPopup", isLoading: "isLoading", options: "options", minDate: "minDate", maxDate: "maxDate", rows: "rows", size: "size" }, outputs: { valueChange: "valueChange", inputValue: "inputValue", onBlur: "onBlur", onFocus: "onFocus", toggleEmit: "toggleEmit", clearInputEmit: "clearInputEmit", nativeInputRef: "nativeInputRef" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, providers: [
             {
@@ -6917,7 +6930,7 @@ class NxtInput {
                 useExisting: forwardRef(() => NxtInput),
                 multi: true,
             },
-        ], viewQueries: [{ 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=\"type === 'label' ? placeholder : label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\" [style.font-weight]=\"labelWeight\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n      [style.color]=\"labelColor || type === 'label' ? 'black' : '#9a9a9a'\" style=\"display: flex; gap: 5px;\"> {{ type ===\n      'label' ? placeholder : 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' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <!-- SKS28FEB25 mobile number input -->\n        <div class=\"phone-input-container\">\n          <div *ngIf=\"type === 'tel'\" 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=\"type === 'tel' && 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'){\n        <input *ngFor=\"let input of inputList; 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]=\"type === 'otp' ? 'fcOtp' : 'custom-input'\" [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : inputWidth\"\n          [value]=\"type === 'tel' ? rawInputVal : value\"\n          (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\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) : 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'\" [readOnly]=\"mode !== 'edit' && !viewEdit\"\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        @else if(type === 'datetime'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : type === 'time' ? 'HH:MM' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [readOnly]=\"mode !== 'edit' && !viewEdit\" [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%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\" />\n        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        <owl-date-time [pickerType]=\"'timer'\" #dt3></owl-date-time>\n        }\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"icon-container\">\n          <ng-container *ngIf=\"isLoading; else searchIcon\">\n            <!-- Minimal Dotted Loader -->\n            <div 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          </ng-container>\n          <ng-template #searchIcon>\n            <!-- Inline search icon SVG -->\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"\n              xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <circle cx=\"11\" cy=\"11\" r=\"7\" />\n              <path d=\"M20 20L17 17\" stroke-linecap=\"round\" />\n            </svg>\n          </ng-template>\n        </div>\n        \n        <!-- Always Show Dropdown Icon -->\n        <svg *ngIf=\"mode === 'edit' && type === 'dropdown'\" (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        <!-- Cancel Icon -->\n        <svg *ngIf=\"value && mode === 'edit' && type === 'dropdown' \" (click)=\"clearEmit($event)\"\n          class=\"icon cancel-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n          fill=\"none\">\n          <path d=\"M6 6L18 18M6 18L18 6\" stroke=\"#292D32\" stroke-width=\"2\" stroke-linecap=\"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' && !viewEdit && !question.isReadOnly\" 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\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\"\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      <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;\"> {{ label }}\n        <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n      </label>\n    </div>\n    <div style=\"display: flex;\">\n      <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" [placeholder]=\"placeholder\"\n          [modules]=\"!viewEdit ? emptyQuillConfiguration : quillConfiguration\" [readOnly]=\"mode !== 'edit' && !viewEdit\"\n          (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n          style=\"width: 100%;\n          padding: 10px 10px 10px 5px;\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=\"width: 100%;\n        padding: 10px 10px 10px 5px;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [readOnly]=\"mode !== 'edit' && !viewEdit\" [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%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\">\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && (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' && 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=date].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}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.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:10px}.input-container .icon-container{right:15px;pointer-events:none;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{padding:0!important;width:auto!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}: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}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: "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=\"type === 'label' ? placeholder : label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\" [style.font-weight]=\"labelWeight\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n      [style.color]=\"labelColor || type === 'label' ? 'black' : '#9a9a9a'\" style=\"display: flex; gap: 5px;\"> {{ type ===\n      'label' ? placeholder : 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' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <!-- SKS28FEB25 mobile number input -->\n        <div class=\"phone-input-container\">\n          <div *ngIf=\"type === 'tel'\" 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=\"type === 'tel' && 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'){\n        <input *ngFor=\"let input of inputList; 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]=\"type === 'otp' ? 'fcOtp' : 'custom-input'\" [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : inputWidth\"\n          [value]=\"type === 'tel' ? rawInputVal : value\"\n          (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\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) : 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          [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        @else if(type === 'datetime'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : type === 'time' ? 'HH:MM' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($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%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\" />\n        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        <owl-date-time [pickerType]=\"'timer'\" #dt3></owl-date-time>\n        }\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"icon-container\">\n          <ng-container *ngIf=\"isLoading; else searchIcon\">\n            <!-- Minimal Dotted Loader -->\n            <div 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          </ng-container>\n          <ng-template #searchIcon>\n            <!-- Inline search icon SVG -->\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"\n              xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <circle cx=\"11\" cy=\"11\" r=\"7\" />\n              <path d=\"M20 20L17 17\" stroke-linecap=\"round\" />\n            </svg>\n          </ng-template>\n        </div>\n\n        <!-- SKS14JUN25 dropdown cancel icon -->\n        <svg  *ngIf=\"value && mode === 'edit' && type === 'dropdown'\" style=\"padding-left: 2px; margin-right: 5px;\" (click)=\"clearEmit($event)\"  width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M13.2997 0.709727C12.9097 0.319727 12.2797 0.319727 11.8897 0.709727L6.99973 5.58973L2.10973 0.699727C1.71973 0.309727 1.08973 0.309727 0.699727 0.699727C0.309727 1.08973 0.309727 1.71973 0.699727 2.10973L5.58973 6.99973L0.699727 11.8897C0.309727 12.2797 0.309727 12.9097 0.699727 13.2997C1.08973 13.6897 1.71973 13.6897 2.10973 13.2997L6.99973 8.40973L11.8897 13.2997C12.2797 13.6897 12.9097 13.6897 13.2997 13.2997C13.6897 12.9097 13.6897 12.2797 13.2997 11.8897L8.40973 6.99973L13.2997 2.10973C13.6797 1.72973 13.6797 1.08973 13.2997 0.709727Z\" fill=\"#0B0B0B\"/>\n        </svg>          \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\" 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;\">\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 && originalValue !== value\" (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\"\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      <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;\"> {{ label }}\n        <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n      </label>\n    </div>\n    <div style=\"display: flex;\">\n      <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <!-- SKS14JUN25  Dynamically load Quill editor toolbar -->\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" [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=\"width: 100%;\n          padding: 10px 10px 10px 5px;\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=\"width: 100%;\n        padding: 10px 10px 10px 5px;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [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          }\" style=\"\n              width: 100%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\">\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && (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' && 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=date].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}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.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:10px}.input-container .icon-container{right:15px;pointer-events:none;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{padding:0!important;width:auto!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}: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{color:#999!important;cursor:not-allowed!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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,
@@ -6932,7 +6945,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=\"type === 'label' ? placeholder : label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\" [style.font-weight]=\"labelWeight\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n      [style.color]=\"labelColor || type === 'label' ? 'black' : '#9a9a9a'\" style=\"display: flex; gap: 5px;\"> {{ type ===\n      'label' ? placeholder : 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' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <!-- SKS28FEB25 mobile number input -->\n        <div class=\"phone-input-container\">\n          <div *ngIf=\"type === 'tel'\" 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=\"type === 'tel' && 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'){\n        <input *ngFor=\"let input of inputList; 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]=\"type === 'otp' ? 'fcOtp' : 'custom-input'\" [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : inputWidth\"\n          [value]=\"type === 'tel' ? rawInputVal : value\"\n          (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\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) : 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'\" [readOnly]=\"mode !== 'edit' && !viewEdit\"\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        @else if(type === 'datetime'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : type === 'time' ? 'HH:MM' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [readOnly]=\"mode !== 'edit' && !viewEdit\" [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%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\" />\n        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        <owl-date-time [pickerType]=\"'timer'\" #dt3></owl-date-time>\n        }\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"icon-container\">\n          <ng-container *ngIf=\"isLoading; else searchIcon\">\n            <!-- Minimal Dotted Loader -->\n            <div 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          </ng-container>\n          <ng-template #searchIcon>\n            <!-- Inline search icon SVG -->\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"\n              xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <circle cx=\"11\" cy=\"11\" r=\"7\" />\n              <path d=\"M20 20L17 17\" stroke-linecap=\"round\" />\n            </svg>\n          </ng-template>\n        </div>\n        \n        <!-- Always Show Dropdown Icon -->\n        <svg *ngIf=\"mode === 'edit' && type === 'dropdown'\" (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        <!-- Cancel Icon -->\n        <svg *ngIf=\"value && mode === 'edit' && type === 'dropdown' \" (click)=\"clearEmit($event)\"\n          class=\"icon cancel-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"\n          fill=\"none\">\n          <path d=\"M6 6L18 18M6 18L18 6\" stroke=\"#292D32\" stroke-width=\"2\" stroke-linecap=\"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' && !viewEdit && !question.isReadOnly\" 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\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\"\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      <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;\"> {{ label }}\n        <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n      </label>\n    </div>\n    <div style=\"display: flex;\">\n      <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" [placeholder]=\"placeholder\"\n          [modules]=\"!viewEdit ? emptyQuillConfiguration : quillConfiguration\" [readOnly]=\"mode !== 'edit' && !viewEdit\"\n          (focusout)=\"onEditorFocusOut()\" [class.error]=\"control.invalid && (control.touched || control.dirty)\"\n          style=\"width: 100%;\n          padding: 10px 10px 10px 5px;\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=\"width: 100%;\n        padding: 10px 10px 10px 5px;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($event)\"\n          [readOnly]=\"mode !== 'edit' && !viewEdit\" [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%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\">\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && (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' && 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=date].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}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.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:10px}.input-container .icon-container{right:15px;pointer-events:none;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{padding:0!important;width:auto!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}: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}.edit-icon{display:none;cursor:pointer}.hover-wrapper:hover .edit-icon{display:block}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- SKS31JAN25 -->\n<div class=\"hover-wrapper input-wrapper\" (document:click)=\"closeDropdown($event)\">\n  <div>\n    <div *ngIf=\"type === 'label' ? placeholder : label && type != 'checkbox' && showLabel\" [ngStyle]=\"{\n        'padding-top': type === 'label' ? '10px' : '',\n        'padding-bottom': type === 'label' ? '10px' : ''\n      }\" [style.font-weight]=\"labelWeight\" [style.font-size]=\"labelSize || type === 'label' ? '16px' : '14px'\"\n      [style.color]=\"labelColor || type === 'label' ? 'black' : '#9a9a9a'\" style=\"display: flex; gap: 5px;\"> {{ type ===\n      'label' ? placeholder : 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' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <img *ngIf=\"inputIconLeftSrc && mode === 'edit'\" [src]=\"inputIconLeftSrc\" alt=\"icon\" class=\"icon left-icon\"\n          [style.height]=\"svgHeight\" [style.width]=\"svgWidth\" />\n        <!-- SKS28FEB25 mobile number input -->\n        <div class=\"phone-input-container\">\n          <div *ngIf=\"type === 'tel'\" 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=\"type === 'tel' && 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'){\n        <input *ngFor=\"let input of inputList; 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]=\"type === 'otp' ? 'fcOtp' : 'custom-input'\" [formControl]=\"type === 'otp' ? $any(input) : control\"\n          [style.backgroundColor]=\"type === 'otp'|| mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"type === 'otp' || mode !== 'edit' ? '' : inputTextColor\"\n          [style.border]=\"type === 'otp' || mode !== 'edit' ? '' : inputBorder\"\n          [style.height]=\"type === 'otp' ? '' : inputHeight\" [style.width]=\"type === 'otp' ? '' : inputWidth\"\n          [value]=\"type === 'tel' ? rawInputVal : value\"\n          (input)=\"type === 'otp' ? handleInput() : onInputChange($event)\"\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) : 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          [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        @else if(type === 'datetime'){\n        <input #inputEl [id]=\"inputId\"\n          [owlDateTimeTrigger]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [owlDateTime]=\"type === 'datetime' ? dt : type === 'date' ? dt2 : type === 'time' ? dt3 : dt\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder || type === 'datetime' ? 'DD/MM/YYYY HH:MM' : type === 'date' ? 'DD/MM/YYYY' : type === 'time' ? 'HH:MM' : 'DD/MM/YYYY HH:MM'\"\n          [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [value]=\"value\" (input)=\" onInputChange($event)\"\n          [style.font-size]=\"inputValueSize\" (blur)=\" blurEmit()\" (focusin)=\"focusinEmit($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%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\" />\n        <owl-date-time #dt></owl-date-time>\n        <owl-date-time [pickerType]=\"'calendar'\" #dt2></owl-date-time>\n        <owl-date-time [pickerType]=\"'timer'\" #dt3></owl-date-time>\n        }\n        <div *ngIf=\"mode === 'edit' && type === 'list'\" class=\"icon-container\">\n          <ng-container *ngIf=\"isLoading; else searchIcon\">\n            <!-- Minimal Dotted Loader -->\n            <div 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          </ng-container>\n          <ng-template #searchIcon>\n            <!-- Inline search icon SVG -->\n            <svg width=\"24\" height=\"24\" fill=\"none\" stroke=\"#434555\" stroke-opacity=\"0.65\" stroke-width=\"2\"\n              xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <circle cx=\"11\" cy=\"11\" r=\"7\" />\n              <path d=\"M20 20L17 17\" stroke-linecap=\"round\" />\n            </svg>\n          </ng-template>\n        </div>\n\n        <!-- SKS14JUN25 dropdown cancel icon -->\n        <svg  *ngIf=\"value && mode === 'edit' && type === 'dropdown'\" style=\"padding-left: 2px; margin-right: 5px;\" (click)=\"clearEmit($event)\"  width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M13.2997 0.709727C12.9097 0.319727 12.2797 0.319727 11.8897 0.709727L6.99973 5.58973L2.10973 0.699727C1.71973 0.309727 1.08973 0.309727 0.699727 0.699727C0.309727 1.08973 0.309727 1.71973 0.699727 2.10973L5.58973 6.99973L0.699727 11.8897C0.309727 12.2797 0.309727 12.9097 0.699727 13.2997C1.08973 13.6897 1.71973 13.6897 2.10973 13.2997L6.99973 8.40973L11.8897 13.2997C12.2797 13.6897 12.9097 13.6897 13.2997 13.2997C13.6897 12.9097 13.6897 12.2797 13.2997 11.8897L8.40973 6.99973L13.2997 2.10973C13.6797 1.72973 13.6797 1.08973 13.2997 0.709727Z\" fill=\"#0B0B0B\"/>\n        </svg>          \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\" 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;\">\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 && originalValue !== value\" (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\"\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      <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;\"> {{ label }}\n        <div *ngIf=\"label && type === 'checkbox' && required && showLabel\" style=\"color: red;\">*</div>\n      </label>\n    </div>\n    <div style=\"display: flex;\">\n      <div class=\"input-container\" [ngClass]=\"{'checkbox-padding': type === 'checkbox' || type === 'otp'}\"\n        [style.backgroundColor]=\"mode === 'edit' ? inputBgColor : ''\"\n        [class.invalid]=\"control.invalid && control.touched\"\n        [style.border]=\"mode === 'edit' ? inputBorder === 'none' ? ('1px solid ' + inputBgColor) : inputBorder : 'none'\">\n        <!-- SKS14JUN25  Dynamically load Quill editor toolbar -->\n        <quill-editor *ngIf=\"mode === 'edit' && type === 'richtext'\" [(ngModel)]=\"value\" [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=\"width: 100%;\n          padding: 10px 10px 10px 5px;\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=\"width: 100%;\n        padding: 10px 10px 10px 5px;\n        border-radius: 5px;\n        border: none;\n        font-size: 14px;\">\n        </div>\n        <textarea *ngIf=\"type === 'textarea'\" [id]=\"inputId\" [rows]=\"rows\"\n          [attr.placeholder]=\"mode !== 'edit' ? '' : placeholder\" [ngClass]=\"'custom-input'\" [formControl]=\"control\"\n          [style.backgroundColor]=\"mode !== 'edit' ? '' : inputBgColor\"\n          [style.color]=\"mode !== 'edit' ? '' : inputTextColor\" [style.border]=\"mode !== 'edit' ? 'none' : inputBorder\"\n          [style.height]=\"inputHeight\" [style.width]=\"inputWidth\" [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          }\" style=\"\n              width: 100%;\n              padding: 10px;\n              padding-left: 5px;\n              border-radius: 5px;\n              border: none !important;\n              font-size: 14px;\">\n          </textarea>\n        <svg *ngIf=\"mode !== 'edit' && !viewEdit && (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' && 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=date].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}.custom-input:-webkit-autofill,.custom-input:-webkit-autofill:hover,.custom-input:-webkit-autofill:focus,.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:10px}.input-container .icon-container{right:15px;pointer-events:none;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{padding:0!important;width:auto!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}: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{color:#999!important;cursor:not-allowed!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ChangeService }, { type: DataService }], propDecorators: { label: [{
                 type: Input
             }], labelFont: [{
@@ -7182,7 +7195,6 @@ class CustomDropdownComponent {
                                 if (this.uniqueKey) {
                                     localStorage.setItem(this.uniqueKey, JSON.stringify(this.options));
                                 }
-                                // Reference https://www.npmjs.com/package/@ng-select/ng-select
                             });
                         }
                         // VD NOV23 - handle the dependent update for dropdown
@@ -7267,13 +7279,13 @@ class CustomDropdownComponent {
         return updatedText;
     }
     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 ɵ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" }, 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  [value]=\"selectedValue\"\n  (onFocus)=\"getOptions()\"\n  [labelFont]=\"question.font\"\n  [label]=\"removeCharacters(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=\"#F5F5F5\"\n  [inputId]=\"question.trackingId\"\n  [errorMessages]=\"{ required: 'This field is required' }\"\n  [inputIconLeftSrc]=\"question.iconLeftSrc\"\n  (toggleEmit)=\"toggle()\"\n  (clearInputEmit)=\"clearSelection()\"\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;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgSelectModule }, { 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", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "clearInputEmit", "nativeInputRef"] }] });
+    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" }, 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  [value]=\"selectedValue\"\n  (onFocus)=\"getOptions()\"\n  [labelFont]=\"question.font\"\n  [label]=\"removeCharacters(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=\"#F5F5F5\"\n  [inputId]=\"question.trackingId\"\n  [errorMessages]=\"{ required: 'This field is required' }\"\n  [inputIconLeftSrc]=\"question.iconLeftSrc\"\n  (toggleEmit)=\"toggle()\"\n  (clearInputEmit)=\"clearSelection()\"\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:98%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "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", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "clearInputEmit", "nativeInputRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-custom-dropdown', standalone: true, imports: [
-                        CommonModule, NgSelectModule, FormsModule, NxtInput
-                    ], template: "<div #dropdownWrapper class=\"dropdown-close\">\n  <nxt-input \n  [type]=\"'dropdown'\"\n  [mode]=\"mode\"\n  [value]=\"selectedValue\"\n  (onFocus)=\"getOptions()\"\n  [labelFont]=\"question.font\"\n  [label]=\"removeCharacters(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=\"#F5F5F5\"\n  [inputId]=\"question.trackingId\"\n  [errorMessages]=\"{ required: 'This field is required' }\"\n  [inputIconLeftSrc]=\"question.iconLeftSrc\"\n  (toggleEmit)=\"toggle()\"\n  (clearInputEmit)=\"clearSelection()\"\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;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}\n"] }]
+                        CommonModule, FormsModule, NxtInput
+                    ], template: "<div #dropdownWrapper class=\"dropdown-close\">\n  <nxt-input \n  [type]=\"'dropdown'\"\n  [mode]=\"mode\"\n  [value]=\"selectedValue\"\n  (onFocus)=\"getOptions()\"\n  [labelFont]=\"question.font\"\n  [label]=\"removeCharacters(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=\"#F5F5F5\"\n  [inputId]=\"question.trackingId\"\n  [errorMessages]=\"{ required: 'This field is required' }\"\n  [inputIconLeftSrc]=\"question.iconLeftSrc\"\n  (toggleEmit)=\"toggle()\"\n  (clearInputEmit)=\"clearSelection()\"\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:98%;margin-top:2px;list-style:none;padding:0}.nxt-dropdown-menu li{padding:8px;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: [{
                 type: Input
             }], placeholder: [{
@@ -12334,8 +12346,12 @@ class QuestionnaireComponent {
         console.log('table data', data);
     }
     displayDate(dateSelected, ques) {
-        // Parse the date string using moment and assign it to this.selectedDate
-        ques.input = moment(dateSelected.value, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss').toString();
+        // SKS14JUN25 Parse the date string using native JavaScrip and assign it to this.selectedDate
+        const date = new Date(dateSelected.value);
+        const pad = (n) => n.toString().padStart(2, '0');
+        const formattedDate = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ` +
+            `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+        ques.input = formattedDate;
     }
     getKey(item) {
         return Object.keys(item)[0];
@@ -15762,14 +15778,14 @@ 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", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", isEdit: "isEdit", dropDownData: "dropDownData", dataBind: "dataBind" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, providers: [ChangeService], 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\" [dir]=\"ques.langDirection\" [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.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'Location')\"\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                      }\">{{\n                        removeCharacters(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\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.data, 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                <lib-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [filterName]=\"ques.input\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-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, ques); 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]=\"removeCharacters(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\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#F5F5F5\"\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}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.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", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error"], 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"], 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"], outputs: ["buttonClickEmit"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "filterName"], 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"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "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: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "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", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "clearInputEmit", "nativeInputRef"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: QuestionbookComponent, isStandalone: true, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", translatedQuestions: "translatedQuestions", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", isEdit: "isEdit", dropDownData: "dropDownData", dataBind: "dataBind" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, providers: [ChangeService], 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\" [dir]=\"ques.langDirection\" [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 !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea'): (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')\"\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                      }\">{{\n                        removeCharacters(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\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.data, 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                <lib-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [filterName]=\"ques.input\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-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, ques); 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]=\"removeCharacters(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\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#F5F5F5\"\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;padding-right:5px}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.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", "translatedQuestions", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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: FileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error"], 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"], 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"], outputs: ["buttonClickEmit"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "filterName"], 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"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "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: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i6.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "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", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "clearInputEmit", "nativeInputRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: QuestionbookComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-questionbook', providers: [ChangeService], standalone: true, imports: [
                         CommonModule,
                         FormsModule, ImageCropperComponent, FileUploadComponent, CustomRadioComponent, CustomDropdownComponent, NxtButtonComponent, SearchBoxComponent, NxtDatatable, PickLocationComponent, CustomModelComponent, CustomCalendarComponent, I18nPipe, MatTooltipModule, NxtInput
-                    ], 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\" [dir]=\"ques.langDirection\" [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.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'Location')\"\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                      }\">{{\n                        removeCharacters(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\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.data, 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                <lib-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [filterName]=\"ques.input\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-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, ques); 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]=\"removeCharacters(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\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#F5F5F5\"\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}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.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"] }]
+                    ], 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\" [dir]=\"ques.langDirection\" [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 !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea'): (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')\"\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                      }\">{{\n                        removeCharacters(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\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.data, 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                <lib-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" [filterName]=\"ques.input\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (searchValueChange)=\"childEventCapture($event, ques)\">\n                </lib-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, ques); 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]=\"removeCharacters(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\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#F5F5F5\"\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;padding-right:5px}.form-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}}.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: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -16139,12 +16155,13 @@ class BookletComponent {
         // HA 23JAN24 To call the action on any event
         //  VD 01Aug24 - validation change
         if (validForm) {
+            let tempElement = dataToParent.data.filter((inputData) => inputData.primaryKey === true);
             // SKS13JUN25 single field change emit
-            if (ques.singleFieldChange) {
+            if (ques.singleFieldChange && tempElement?.input !== undefined && tempElement?.input !== '' && tempElement?.input !== null) {
                 dataToParent.data = dataToParent.data.filter((inputData) => inputData.id === ques.id || inputData.primaryKey === true);
             }
             dataToParent.data.forEach(element => {
-                if (element.primaryKey === true) {
+                if (element.primaryKey === true && element?.input !== undefined && element?.input !== '' && element?.input !== null) {
                     dataToParent.action['eventtoemit'] = 'save';
                     dataToParent.action['method'] = 'PATCH';
                 }
@@ -16642,48 +16659,6 @@ var tamI18n$1 = /*#__PURE__*/Object.freeze({
     default: tamI18n
 });
 
-// VD 06-09-24 directive file to call component dynamically 
-class ComponenthostDirective {
-    viewContainerRef;
-    constructor(viewContainerRef) {
-        this.viewContainerRef = viewContainerRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponenthostDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: ComponenthostDirective, isStandalone: true, selector: "[dynamicComponentHost]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ComponenthostDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[dynamicComponentHost]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
-
-// AP 22JAN25
-class MenuComponent {
-    activeIndex = 0;
-    menuItems = [
-        { icon: '../assets/icons/Related.svg' },
-        { icon: '../assets/icons/TextColumns.svg' },
-        { icon: '../assets/icons/Monotone.svg' },
-        { icon: '../assets/icons/Preview1.svg' },
-        { icon: '../assets/icons/Website.svg' },
-        { icon: '../assets/icons/Preview2.svg' },
-        { icon: '../assets/icons/pdf.svg' },
-        { icon: '../assets/icons/Setting.svg' }
-        // { icon: '../assets/icons/ProfileImage.svg' }
-    ];
-    setActiveMenu(index) {
-        this.activeIndex = index;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MenuComponent, selector: "app-menu", ngImport: i0, template: "<!-- AP 22JAN25 - Top menu ,Left side menu  -->\n<!-- menu.component.html -->\n<div class=\"top-bar\">\n    <button class=\"button share-button\">Share</button>\n    <button class=\"button publish-button\">Publish</button>\n</div>\n<div class=\"menu-sidebar\">\n  <!-- Logo Section -->\n  <div class=\"menu-logo\">\n    <img src=\"../assets/Nxt.png\">\n  </div>\n\n  <!-- Menu Items -->\n  <ul class=\"menu-list\">\n    <li\n      *ngFor=\"let item of menuItems; let i = index\"\n      class=\"menu-item\"\n      [class.active]=\"activeIndex === i\"\n      (click)=\"setActiveMenu(i)\"\n      [attr.aria-label]=\"item.label\"\n    >\n      <!-- Dynamic Icon -->\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\n    </li>\n  </ul>\n\n  <!-- Profile Section -->\n  <div class=\"menu-profile\">\n    <img src=\"../assets/icons/ProfileImage.svg\" />\n  </div>\n</div>\n\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:calc(100vh - 20px);background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-menu', template: "<!-- AP 22JAN25 - Top menu ,Left side menu  -->\n<!-- menu.component.html -->\n<div class=\"top-bar\">\n    <button class=\"button share-button\">Share</button>\n    <button class=\"button publish-button\">Publish</button>\n</div>\n<div class=\"menu-sidebar\">\n  <!-- Logo Section -->\n  <div class=\"menu-logo\">\n    <img src=\"../assets/Nxt.png\">\n  </div>\n\n  <!-- Menu Items -->\n  <ul class=\"menu-list\">\n    <li\n      *ngFor=\"let item of menuItems; let i = index\"\n      class=\"menu-item\"\n      [class.active]=\"activeIndex === i\"\n      (click)=\"setActiveMenu(i)\"\n      [attr.aria-label]=\"item.label\"\n    >\n      <!-- Dynamic Icon -->\n      <img [src]=\"item.icon\" alt=\"Menu Icon\" class=\"menu-icon\" />\n    </li>\n  </ul>\n\n  <!-- Profile Section -->\n  <div class=\"menu-profile\">\n    <img src=\"../assets/icons/ProfileImage.svg\" />\n  </div>\n</div>\n\n", styles: [".top-bar{display:flex;justify-content:flex-end;padding:15px;background-color:#fff;border-bottom:1px solid #ccc;width:100%;position:absolute;top:-3px}.button{padding:10px 20px;margin-left:10px;font-size:1rem;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.share-button{background-color:#e5e8ed;color:#384652}.share-button:hover,.publish-button{background-color:#3374f2;color:#fff}.publish-button:hover{background-color:#005f73}.menu-sidebar{width:74px;height:calc(100vh - 20px);background-color:#fff;color:#94a3b8;display:flex;flex-direction:column;align-items:center;position:absolute;top:0;box-shadow:2px 0 5px #0000001a}.menu-logo img{width:40px;margin:20px 0}.menu-list{list-style-type:none;padding:0;margin-top:48px;flex:1}.menu-item{width:50px;height:50px;display:flex;justify-content:center;align-items:center;margin:10px 0;cursor:pointer;border-radius:8px;transition:background .3s ease}.menu-item.active,.menu-item:hover{background-color:#ffb300;border-radius:50px;color:#fff}.icon{font-size:20px}.menu-profile img{width:40px;border-radius:50%;margin-bottom:20px}\n"] }]
-        }] });
-
 // AP 22JAN25
 class FormBuilderService {
     http;
@@ -17270,29 +17245,20 @@ class PdfDesignerService {
     convertToPdfLayout(input) {
         const result = { content: [] };
         const items = input[this.unique_id];
-        // AP-02JUN25 - Define nxtType for each item 
-        const styleProps = (item) => ({
-            fontSize: item.fontSize || 14,
-            bold: item.fontStyle === 'bold' || item.fontWeight >= 700,
-            italics: item.fontStyle === 'italic',
-            alignment: item.alignItems || '',
-            margin: item.margin || [0, 0, 0, 0],
-            nxtType: item.type || '',
-        });
         const processItems = (items) => {
             const rows = [];
             let currentRow = { columns: [] };
             let currentWidth = 0;
             for (const item of items) {
                 const width = item.width || 100;
-                let element = { width, ...styleProps(item) };
+                let element = { width, "margin": [0, 10, 0, 10], };
                 if (currentWidth + width > 100) {
                     rows.push(currentRow);
                     currentRow = { columns: [] };
                     currentWidth = 0;
                 }
                 if (item.type === "Space") {
-                    currentRow.columns.push({ width, text: '', ...styleProps(item) });
+                    currentRow.columns.push({ width, text: '' });
                 }
                 else if (item.type === 'Line') {
                     element.canvas = [
@@ -17303,7 +17269,7 @@ class PdfDesignerService {
                             x2: item.x2 ?? 520,
                             y2: item.y2 ?? 0,
                             lineWidth: item.lineWidth ?? 1,
-                            lineColor: item.lineColor ?? '#000000'
+                            lineColor: item.lineColor ?? '#000000',
                         }
                     ];
                     currentRow.columns.push(element);
@@ -17314,7 +17280,6 @@ class PdfDesignerService {
                     currentRow.columns.push(nestedContent);
                 }
                 else if (item.type === 'Table') {
-                    console.log("table process");
                     let summaryRowPosition = 0;
                     const tableColumns = item.fieldsMeta || [];
                     const mainColumns = tableColumns.filter(column => column.summaryRow !== true);
@@ -17331,21 +17296,21 @@ class PdfDesignerService {
                     const body = [];
                     // Table headers
                     body.push(mainColumns.map(col => ({
-                        text: col.label,
-                        ...styleProps(item)
+                        text: col.label, style: item.styleClass
                     })));
                     // Table data
                     item?.value?.data?.forEach(tableData => {
                         body.push(mainColumns.map(col => ({
-                            text: tableData[col.apiName],
-                            ...styleProps(item)
+                            text: tableData[col.apiName]
                         })));
                     });
                     // Summary rows
                     summaryRow.forEach((col) => {
-                        const row = new Array(mainColumns.length).fill({ text: '', ...styleProps(item) });
-                        row[summaryRowPosition - 1] = { text: col.label, ...styleProps(item) };
-                        row[summaryRowPosition] = { text: item?.value?.summaryValues?.[col.apiName], ...styleProps(item) };
+                        //AP-14JUN25 - Create an empty row with same number of columns as main table, filled with blank cells (no borders)
+                        const row = new Array(mainColumns.length).fill({ text: '', "border": [false, false, false, false] });
+                        //AP-14JUN25 - Set the label text at the left summary position with bottom-side border
+                        row[summaryRowPosition - 1] = { text: col.label, "border": [false, false, false, true] };
+                        row[summaryRowPosition] = { text: item?.value?.summaryValues?.[col.apiName], "border": [false, false, false, true] };
                         body.push(row);
                     });
                     element = {
@@ -17354,7 +17319,6 @@ class PdfDesignerService {
                             body,
                             widths: new Array(mainColumns.length).fill('*')
                         },
-                        ...styleProps(item)
                     };
                     currentRow.columns.push(element);
                 }
@@ -17362,16 +17326,14 @@ class PdfDesignerService {
                     currentRow.columns.push({
                         width,
                         image: item.imageData || '',
-                        fit: [item.width || 100, item.height || 100],
-                        ...styleProps(item)
+                        fit: [item.width || 100, item.height || 100], style: item.styleClass
                     });
                 }
                 else {
                     const val = item.value || '';
                     currentRow.columns.push({
                         width,
-                        text: val,
-                        ...styleProps(item)
+                        text: val, style: item.styleClass,
                     });
                 }
                 currentWidth += width;
@@ -17387,6 +17349,11 @@ class PdfDesignerService {
             return rows;
         };
         result.content = processItems(items);
+        let styleJson = {};
+        for (const item of items) {
+            styleJson[item.styleClass] = item.style;
+        }
+        result['styles'] = styleJson;
         return result;
     }
     // AP-06MAR25 - Element new order update
@@ -17444,7 +17411,7 @@ const VERSION = {
     "semver": null,
     "suffix": "05a52cb-dirty",
     "semverString": null,
-    "version": "2.1.178"
+    "version": "2.1.180"
 };
 /* tslint:enable */
 
@@ -18944,6 +18911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class PdfDesignerComponent {
     pdfDesignerService;
     //@Output() elementButtonClicked = new EventEmitter<string>();
+    textareas;
     pdfJSON;
     bookletId;
     isPreview = false;
@@ -18992,10 +18960,34 @@ class PdfDesignerComponent {
     roundCropper = false;
     isImageHover = false;
     alignImage = 'center';
+    showTextSettings = false;
+    selectedColumn = null;
     //subscription: any;
     constructor(pdfDesignerService) {
         this.pdfDesignerService = pdfDesignerService;
     }
+    //AP-14JUN25 - Called after view initialization to auto-resize all textareas
+    ngAfterViewInit() {
+        this.resizeAllTextareas();
+    }
+    //AP-14JUN25 - Calculates contrast text color (black or white) based on background color
+    getContrastColor(bgColor = '#000000') {
+        // Convert hex to RGB
+        const color = bgColor.replace('#', '');
+        const r = parseInt(color.substring(0, 2), 16);
+        const g = parseInt(color.substring(2, 4), 16);
+        const b = parseInt(color.substring(4, 6), 16);
+        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+        return brightness > 128 ? '#000000' : '#ffffff';
+    }
+    //AP-14JUN25 - Automatically resizes all textareas based on their content
+    resizeAllTextareas() {
+        this.textareas.forEach((textareaRef) => {
+            const textarea = textareaRef.nativeElement;
+            textarea.style.height = 'auto';
+            textarea.style.height = textarea.scrollHeight + 'px';
+        });
+    }
     ngOnInit() {
         this.elementsList = [
             { "type": "text", "img": "TextArea", "label": "Text" },
@@ -19005,7 +18997,7 @@ class PdfDesignerComponent {
             { "type": "Line", "img": "line", "label": "Line" },
             { "type": "Space", "img": "space", "label": "Space" },
             { "type": "Table", "img": "Table", "label": "Table" },
-            { "type": "Pdf", "img": "Search", "label": "Pdf" },
+            { "type": "Pdf", "img": "Search", "label": "Book" },
         ];
         this.elementDisabledArray = {
             Table: [
@@ -19070,25 +19062,6 @@ class PdfDesignerComponent {
         this.pdfElements = [];
         this.pdfDesignerService.clearElements();
         this.pdfDesignerService.intializeBook(this.pdfJSON);
-        const pdfMapKey = Object.keys(this.pdfJSON)[0];
-        const pdfArray = this.pdfJSON[pdfMapKey];
-        if (Array.isArray(pdfArray)) {
-            pdfArray.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,
-                        "bookStyle": null,
-                        "direction": "ltr",
-                        "questionStyle": null
-                    };
-                }
-            });
-        }
         this.pdfElements = this.pdfDesignerService.getElements();
     }
     selectElement(index) {
@@ -19128,14 +19101,12 @@ class PdfDesignerComponent {
                 pdfReference: null,
                 pdfReferenceQuestions: null,
                 style: {
-                    labelClass: null,
-                    labelStyle: null,
-                    labelValueStyle: null,
-                    inputClass: null,
-                    inputStyle: null,
-                    bookStyle: null,
-                    direction: 'ltr',
-                    questionStyle: null,
+                    bold: false,
+                    italic: false,
+                    alignment: 'left',
+                    fontSize: 14,
+                    margin: [0, 0, 0, 0],
+                    color: '#000000',
                 },
                 imageData: null,
                 imageSize: type === 'image' ? { width: 150, height: 150 } : null,
@@ -19157,6 +19128,15 @@ class PdfDesignerComponent {
             this.addTable = true;
         }
     }
+    //AP-14JUN25 - Handles textarea input: auto-resizes and updates the field content
+    onTextAreaInput(event, field) {
+        const textarea = event.target;
+        // 1. Auto-resize logic
+        textarea.style.height = 'auto';
+        textarea.style.height = textarea.scrollHeight + 'px';
+        // 2. Trigger value update and PDF sync
+        this.onQuestionChange(textarea.value, field);
+    }
     onQuestionChange(value, field) {
         console.log(field);
         let elementId;
@@ -19502,13 +19482,51 @@ class PdfDesignerComponent {
     closeModal() {
         this.isImageEdit = false;
     }
+    openTextSettings(field, event) {
+        this.selectedColumn = field;
+        this.showTextSettings = true;
+    }
+    closeTextSettings() {
+        this.showTextSettings = false;
+    }
+    //AP-14JUN25 - Toggles bold or italic style for the selected text block
+    toggleStyle(style) {
+        if (!this.selectedColumn)
+            return;
+        if (style === 'bold') {
+            this.selectedColumn.style.bold = !this.selectedColumn.style.bold;
+        }
+        else if (style === 'italic') {
+            this.selectedColumn.style.italics = !this.selectedColumn.style.italics;
+        }
+        this.updateContent();
+    }
+    //AP-14JUN25 - Sets text alignment (left, center, right) for the selected text block
+    setAlignment(alignment) {
+        if (!this.selectedColumn)
+            return;
+        this.selectedColumn.style.alignment = alignment;
+        this.updateContent();
+    }
+    //AP-14JUN25 - Updates the content in the PDF designer with the selected style changes
+    updateContent() {
+        this.pdfDesignerService.elementUpdate(this.selectedColumn);
+    }
+    getMarginStyle(margin) {
+        if (!margin || margin.length !== 4)
+            return '0';
+        return `${margin[1]}px ${margin[2]}px ${margin[3]}px ${margin[0]}px`;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PdfDesignerComponent, deps: [{ token: PdfDesignerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview" }, outputs: { templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div class=\"element\" [class.disabled]=\"isElementDisabled(element.type)\"\n          (click)=\"!isElementDisabled(element.type) && addElement(element.type)\"\n          [draggable]=\"!isElementDisabled(element.type)\"\n          [matTooltip]=\"isElementDisabled(element.type) ? 'This element is not supported when a ' + (selectedElement?.type || 'certain element') + ' is present' : null\">\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\n      <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div>\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 *ngIf=\"!isPreview\" class=\"field-container\"\n        style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n        (click)=\"selectHeading('Header')\">\n        <div class=\"label-container\" style=\"padding: 10px;\">\n          <div *ngIf=\"pdf\">\n            <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">Heading</div>\n            <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n          </div>\n        </div>\n      </div>\n\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\" getProperties().elementProps>\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"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 && !isPreview\" draggable=\"true && !isPreview\"\n          (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n          [ngStyle]=\"getFontStyles(field)\" (mouseenter)=\"isImageHover = true;\"\n          (mouseleave)=\"isImageHover = false;\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div>\n                  <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      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=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" />\n                    </div>\n\n                    <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                      <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                        <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                        <span>Upload Image</span>\n                      </label>\n                      <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                        style=\"display: none;\" />\n                    </div>\n                  </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Space Element -->\n        <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div *ngIf=\"!isPreview\" class=\"field-content\">\n              <div class=\"label-container\">\n                <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\" [placeholder]=\"'Enter detailed text here...'\"\n                [value]=\"field.value\" (input)=\"onQuestionChange($event.target.value, field)\"\n                [style.height.px]=\"isPreview ? 40 : field.size || 100\"></textarea>\n            </div>\n          </div>\n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.input\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace custom date picker -->\n              <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\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</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\"\n                          [value]=\"field.value ? field.value : ''\"(input)=\"onQuestionChange($event.target.value, field)\" ></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\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 && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\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>These element want to add a table</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">No</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n          <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: [".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 img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-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;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { 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"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }, { kind: "component", type: AppTemplatesComponent, selector: "app-templates", outputs: ["templateSelected"] }, { 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", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "clearInputEmit", "nativeInputRef"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview" }, outputs: { templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div class=\"element\" [class.disabled]=\"isElementDisabled(element.type)\"\n          (click)=\"!isElementDisabled(element.type) && addElement(element.type)\"\n          [draggable]=\"!isElementDisabled(element.type)\"\n          [matTooltip]=\"isElementDisabled(element.type) ? 'This element is not supported when a ' + (selectedElement?.type || 'certain element') + ' is present' : null\">\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\n      <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div>\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 *ngIf=\"!isPreview\" class=\"field-container\"\n        style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n        (click)=\"selectHeading('Header')\">\n        <div class=\"label-container\" style=\"padding: 10px;\">\n          <div *ngIf=\"pdf\">\n            <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">Heading</div>\n            <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n          </div>\n        </div>\n      </div>\n\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\" getProperties().elementProps>\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"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 && !isPreview\" draggable=\"true && !isPreview\"\n          (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n          [ngStyle]=\"getFontStyles(field)\" (mouseenter)=\"isImageHover = true;\"\n          (mouseleave)=\"isImageHover = false;\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div>\n                  <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      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=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" />\n                    </div>\n\n                    <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                      <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                        <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                        <span>Upload Image</span>\n                      </label>\n                      <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                        style=\"display: none;\" />\n                    </div>\n                  </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Space Element -->\n        <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div *ngIf=\"!isPreview\" class=\"field-content\">\n              <div class=\"label-container\">\n                <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\"\n              [placeholder]=\"'Enter detailed text here...'\"\n              [value]=\"field.value? field.value : ''\"\n              (input)=\"onTextAreaInput($event, field)\"\n              #autoTextarea\n              [style.height.px]=\"isPreview ? 40 : null\"\n              (click)=\"openTextSettings(field, $event)\"\n              (ngModelChange)=\"updateContent()\" \n              [ngStyle]=\"{\n                'font-size': field.style.fontSize\n                  ? field.style.fontSize + 'px'\n                  : '14px',\n                'font-weight': field.style.bold ? 'bold' : 'normal',\n                'font-style': field.style.italics ? 'italic' : 'normal',\n                'text-decoration': field.style.decoration ? 'decoration' : 'none',\n                'text-align': field.style.alignment || 'left',\n                 margin: field.style.margin ? getMarginStyle(field.style.margin) : '0',\n                 color: field.style.color || '#000',\n              }\"></textarea>\n            \n            </div>\n          </div>\n\n                           <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                           <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n                           [ngStyle]=\"{\n                             position: 'absolute',\n                             background: '#fff',\n                             border: '1px solid #ccc',\n                             padding: '6px 10px',\n                             'border-radius': '4px',\n                             'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                             'z-index': '65535',\n                             display: 'flex',\n                             'align-items': 'center',\n                             gap: '8px'\n                           }\">\n                         \n                           <!-- Font Size -->\n                           <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                             <option [value]=\"12\">12pt</option>\n                             <option [value]=\"14\">14pt</option>\n                             <option [value]=\"16\">16pt</option>\n                             <option [value]=\"18\">18pt</option>\n                             <option [value]=\"24\">24pt</option>\n                           </select>\n\n                          <!-- Text Color -->\n                          <label title=\"Text Color\" class=\"color-label\">\n                          <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                          <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                          </label>\n\n                           <!-- Bold -->\n                           <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">B</button>\n                         \n                           <!-- Italic -->\n                           <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>I</i></button>\n\n                           <!-- Underline -->\n                           <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n\n                         \n                           <!-- Align Left -->\n                           <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">format_align_left</span>\n                           </button>\n                         \n                           <!-- Align Center -->\n                           <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">format_align_center</span>\n                           </button>\n                         \n                           <!-- Align Right -->\n                           <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">format_align_right</span>\n                           </button>\n                         \n                           <!-- Close -->\n                           <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                         </div>\n                          \n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.input\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace custom date picker -->\n              <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\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</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\"\n                          [value]=\"field.value ? field.value : ''\"(input)=\"onQuestionChange($event.target.value, field)\" ></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-14JUN25 Added nxt-input in pdf -->\n                  <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\"> \n                        <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value ? field.value : ''\"\n                          [placeholder]=\"'Enter your input'\" (input)=\"onQuestionChange($event.target.value, field)\">\n                        </nxt-input>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\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 && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\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>These element want to add a table</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">No</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n          <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: [".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 img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-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;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;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}.text-settings-toolbar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;animation:slideIn .2s ease-in-out}.toolbar-select{padding:8px;font-size:14px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .3s ease}.toolbar-select:hover{border-color:#005aaa}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{position:relative;cursor:pointer;display:inline-block;margin:0 4px}.color-box{font-weight:700;padding:2px 6px;border:1px solid #ccc;border-radius:2px}.bg-box{background-color:#000;color:#fff}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.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: 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"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }, { kind: "component", type: AppTemplatesComponent, selector: "app-templates", outputs: ["templateSelected"] }, { 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", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "clearInputEmit", "nativeInputRef"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PdfDesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pdf-designer', standalone: true, imports: [CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, BookletComponent, AppTemplatesComponent, NxtInput], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div class=\"element\" [class.disabled]=\"isElementDisabled(element.type)\"\n          (click)=\"!isElementDisabled(element.type) && addElement(element.type)\"\n          [draggable]=\"!isElementDisabled(element.type)\"\n          [matTooltip]=\"isElementDisabled(element.type) ? 'This element is not supported when a ' + (selectedElement?.type || 'certain element') + ' is present' : null\">\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\n      <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div>\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 *ngIf=\"!isPreview\" class=\"field-container\"\n        style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n        (click)=\"selectHeading('Header')\">\n        <div class=\"label-container\" style=\"padding: 10px;\">\n          <div *ngIf=\"pdf\">\n            <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">Heading</div>\n            <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n          </div>\n        </div>\n      </div>\n\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\" getProperties().elementProps>\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"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 && !isPreview\" draggable=\"true && !isPreview\"\n          (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n          [ngStyle]=\"getFontStyles(field)\" (mouseenter)=\"isImageHover = true;\"\n          (mouseleave)=\"isImageHover = false;\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div>\n                  <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      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=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" />\n                    </div>\n\n                    <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                      <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                        <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                        <span>Upload Image</span>\n                      </label>\n                      <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                        style=\"display: none;\" />\n                    </div>\n                  </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Space Element -->\n        <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div *ngIf=\"!isPreview\" class=\"field-content\">\n              <div class=\"label-container\">\n                <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\" [placeholder]=\"'Enter detailed text here...'\"\n                [value]=\"field.value\" (input)=\"onQuestionChange($event.target.value, field)\"\n                [style.height.px]=\"isPreview ? 40 : field.size || 100\"></textarea>\n            </div>\n          </div>\n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.input\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace custom date picker -->\n              <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\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</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\"\n                          [value]=\"field.value ? field.value : ''\"(input)=\"onQuestionChange($event.target.value, field)\" ></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\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 && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\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>These element want to add a table</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">No</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n          <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: [".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 img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-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;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;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}\n"] }]
-        }], ctorParameters: () => [{ type: PdfDesignerService }], propDecorators: { pdfJSON: [{
+            args: [{ selector: 'app-pdf-designer', standalone: true, imports: [CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, BookletComponent, AppTemplatesComponent, NxtInput], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div class=\"element\" [class.disabled]=\"isElementDisabled(element.type)\"\n          (click)=\"!isElementDisabled(element.type) && addElement(element.type)\"\n          [draggable]=\"!isElementDisabled(element.type)\"\n          [matTooltip]=\"isElementDisabled(element.type) ? 'This element is not supported when a ' + (selectedElement?.type || 'certain element') + ' is present' : null\">\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\n      <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div>\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 *ngIf=\"!isPreview\" class=\"field-container\"\n        style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n        (click)=\"selectHeading('Header')\">\n        <div class=\"label-container\" style=\"padding: 10px;\">\n          <div *ngIf=\"pdf\">\n            <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">Heading</div>\n            <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n          </div>\n        </div>\n      </div>\n\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\" getProperties().elementProps>\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"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 && !isPreview\" draggable=\"true && !isPreview\"\n          (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n          [ngStyle]=\"getFontStyles(field)\" (mouseenter)=\"isImageHover = true;\"\n          (mouseleave)=\"isImageHover = false;\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div>\n                  <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      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=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" />\n                    </div>\n\n                    <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                      <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                        <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                        <span>Upload Image</span>\n                      </label>\n                      <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                        style=\"display: none;\" />\n                    </div>\n                  </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Space Element -->\n        <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div *ngIf=\"!isPreview\" class=\"field-content\">\n              <div class=\"label-container\">\n                <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\"\n              [placeholder]=\"'Enter detailed text here...'\"\n              [value]=\"field.value? field.value : ''\"\n              (input)=\"onTextAreaInput($event, field)\"\n              #autoTextarea\n              [style.height.px]=\"isPreview ? 40 : null\"\n              (click)=\"openTextSettings(field, $event)\"\n              (ngModelChange)=\"updateContent()\" \n              [ngStyle]=\"{\n                'font-size': field.style.fontSize\n                  ? field.style.fontSize + 'px'\n                  : '14px',\n                'font-weight': field.style.bold ? 'bold' : 'normal',\n                'font-style': field.style.italics ? 'italic' : 'normal',\n                'text-decoration': field.style.decoration ? 'decoration' : 'none',\n                'text-align': field.style.alignment || 'left',\n                 margin: field.style.margin ? getMarginStyle(field.style.margin) : '0',\n                 color: field.style.color || '#000',\n              }\"></textarea>\n            \n            </div>\n          </div>\n\n                           <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                           <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n                           [ngStyle]=\"{\n                             position: 'absolute',\n                             background: '#fff',\n                             border: '1px solid #ccc',\n                             padding: '6px 10px',\n                             'border-radius': '4px',\n                             'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                             'z-index': '65535',\n                             display: 'flex',\n                             'align-items': 'center',\n                             gap: '8px'\n                           }\">\n                         \n                           <!-- Font Size -->\n                           <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                             <option [value]=\"12\">12pt</option>\n                             <option [value]=\"14\">14pt</option>\n                             <option [value]=\"16\">16pt</option>\n                             <option [value]=\"18\">18pt</option>\n                             <option [value]=\"24\">24pt</option>\n                           </select>\n\n                          <!-- Text Color -->\n                          <label title=\"Text Color\" class=\"color-label\">\n                          <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                          <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                          </label>\n\n                           <!-- Bold -->\n                           <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">B</button>\n                         \n                           <!-- Italic -->\n                           <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>I</i></button>\n\n                           <!-- Underline -->\n                           <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n\n                         \n                           <!-- Align Left -->\n                           <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">format_align_left</span>\n                           </button>\n                         \n                           <!-- Align Center -->\n                           <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">format_align_center</span>\n                           </button>\n                         \n                           <!-- Align Right -->\n                           <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">format_align_right</span>\n                           </button>\n                         \n                           <!-- Close -->\n                           <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                         </div>\n                          \n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.input\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace custom date picker -->\n              <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"getLineStyles(field)\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\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</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\"\n                          [value]=\"field.value ? field.value : ''\"(input)=\"onQuestionChange($event.target.value, field)\" ></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-14JUN25 Added nxt-input in pdf -->\n                  <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\"> \n                        <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value ? field.value : ''\"\n                          [placeholder]=\"'Enter your input'\" (input)=\"onQuestionChange($event.target.value, field)\">\n                        </nxt-input>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\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 && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\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>These element want to add a table</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">No</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n          <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: [".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 img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-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;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;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}.text-settings-toolbar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;animation:slideIn .2s ease-in-out}.toolbar-select{padding:8px;font-size:14px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .3s ease}.toolbar-select:hover{border-color:#005aaa}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{position:relative;cursor:pointer;display:inline-block;margin:0 4px}.color-box{font-weight:700;padding:2px 6px;border:1px solid #ccc;border-radius:2px}.bg-box{background-color:#000;color:#fff}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}\n"] }]
+        }], ctorParameters: () => [{ type: PdfDesignerService }], propDecorators: { textareas: [{
+                type: ViewChildren,
+                args: ['autoTextarea']
+            }], pdfJSON: [{
                 type: Input
             }], bookletId: [{
                 type: Input
@@ -19520,675 +19538,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
-// export const MY_CUSTOM_FORMATS = {
-//   fullPickerInput: 'DD/MM/YYYY HH:mm:ss',
-//   useUtc: true,
-// };
-// 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,
-            //AP 22JAN2025 Added the below components
-            MenuComponent], imports: [i1$2.QuillModule, // RS 06JAN2025 Initializes the QuillModule with default settings for integrating the Quill editor.
-            CommonModule, FormsModule,
-            NxtDatatable,
-            NxtInput,
-            QuestionnaireComponent,
-            CustomCalendarComponent,
-            CustomModelComponent,
-            PickLocationComponent,
-            CustomDropdownComponent,
-            CustomRadioComponent,
-            FileUploadComponent,
-            BookletComponent,
-            SearchBoxComponent,
-            QuestionbookComponent,
-            NxtButtonComponent,
-            // BrowserModule,
-            ReactiveFormsModule,
-            OwlDateTimeModule,
-            OwlNativeDateTimeModule,
-            ComponenthostDirective,
-            GetValuePipe,
-            //    VD 23JAN24 removed HttpClientModule
-            NgSelectModule,
-            GoogleMapsModule,
-            MatTooltipModule,
-            DragDropModule, //AP 22JAN25 Added the DragDropModule
-            ImageCropperComponent,
-            PdfDesignerComponent,
-            PdfPropertiesComponent, I18nModule], exports: [NxtAppComponent,
-            QuestionnaireComponent,
-            BookletComponent,
-            I18nComponent,
-            MenuComponent,
-            NxtDatatable,
-            NxtInput,
-            NxtButtonComponent,
-            PdfDesignerComponent,
-            PdfPropertiesComponent] });
-    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
-        ], imports: [QuillModule.forRoot(), // RS 06JAN2025 Initializes the QuillModule with default settings for integrating the Quill editor.
-            CommonModule, FormsModule,
-            NxtDatatable,
-            NxtInput,
-            QuestionnaireComponent,
-            CustomCalendarComponent,
-            CustomModelComponent,
-            PickLocationComponent,
-            CustomDropdownComponent,
-            CustomRadioComponent,
-            FileUploadComponent,
-            BookletComponent,
-            SearchBoxComponent,
-            QuestionbookComponent,
-            NxtButtonComponent,
-            // BrowserModule,
-            ReactiveFormsModule,
-            OwlDateTimeModule,
-            OwlNativeDateTimeModule,
-            //    VD 23JAN24 removed HttpClientModule
-            NgSelectModule,
-            GoogleMapsModule,
-            MatTooltipModule,
-            DragDropModule,
-            PdfDesignerComponent,
-            PdfPropertiesComponent,
-            I18nModule.forRoot(languages)] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtAppModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [NxtAppComponent,
-                        I18nComponent,
-                        //AP 22JAN2025 Added the below components
-                        MenuComponent
-                    ],
-                    imports: [
-                        QuillModule.forRoot(), // RS 06JAN2025 Initializes the QuillModule with default settings for integrating the Quill editor.
-                        CommonModule, FormsModule,
-                        NxtDatatable,
-                        NxtInput,
-                        QuestionnaireComponent,
-                        CustomCalendarComponent,
-                        CustomModelComponent,
-                        PickLocationComponent,
-                        CustomDropdownComponent,
-                        CustomRadioComponent,
-                        FileUploadComponent,
-                        BookletComponent,
-                        SearchBoxComponent,
-                        QuestionbookComponent,
-                        NxtButtonComponent,
-                        // BrowserModule,
-                        ReactiveFormsModule,
-                        OwlDateTimeModule,
-                        OwlNativeDateTimeModule,
-                        ComponenthostDirective,
-                        GetValuePipe,
-                        //    VD 23JAN24 removed HttpClientModule
-                        NgSelectModule,
-                        GoogleMapsModule,
-                        MatTooltipModule,
-                        DragDropModule, //AP 22JAN25 Added the DragDropModule
-                        ImageCropperComponent,
-                        PdfDesignerComponent,
-                        PdfPropertiesComponent,
-                        I18nModule.forRoot(languages)
-                    ],
-                    bootstrap: [NxtAppComponent],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    exports: [NxtAppComponent,
-                        QuestionnaireComponent,
-                        BookletComponent,
-                        I18nComponent,
-                        MenuComponent,
-                        NxtDatatable,
-                        NxtInput,
-                        NxtButtonComponent,
-                        PdfDesignerComponent,
-                        PdfPropertiesComponent,
-                    ],
-                    providers: [
-                        I18nService,
-                        I18nPipe,
-                        FormBuilderService, //AP 22JAN2025 Added the FormBuilderService
-                        PdfDesignerService
-                    ]
-                    // providers: [
-                    //   { provide: OWL_MOMENT_DATE_TIME_ADAPTER_OPTIONS, useValue: { useUtc: false } },
-                    //   { provide: OWL_DATE_TIME_FORMATS, useValue: MY_CUSTOM_FORMATS },
-                    // ]
-                }]
-        }] });
-
-// AP 22JAN25 - form preview and All form elements
-class ElementComponent {
+class PropertiesComponent {
+    http;
     formBuilderService;
-    //@Output() elementButtonClicked = new EventEmitter<string>();
-    bookletJSON;
-    bookletId;
-    templateMode = new EventEmitter();
-    field;
-    formElements = [];
-    elements = [];
+    templateService;
+    formButtonHandler = new EventEmitter();
+    templateSaveHandler = new EventEmitter();
+    selectedOption = '';
+    selectedElementIndex = -1;
+    selectedElementType = '';
+    selectedAlign = 'align-left'; // Add this property
+    selectedStyles = []; // Using array since multiple styles can be selected
+    errorMessage = '';
+    selectedElement = null; // Receive the selected element
+    headerSelect = false;
     bookId;
-    sections = {
-        basic: true, // Basic Elements open by default
-        advanced: true // Advanced Elements closed by default
-    };
-    basicElements = [];
-    advancedElements = [];
-    //elementDisabledArray: any;
-    version = VERSION.version; //SKS10MAR25 get version from environment/version.ts 
     book;
-    selectedElement = null;
-    isSelectTablePopup = false;
-    currentType;
-    addTable = true;
-    dots = Array(6);
-    draggedIndex = null;
-    templateSelected = false;
-    //subscription: any;
-    constructor(formBuilderService) {
-        this.formBuilderService = formBuilderService;
-    }
-    //  AP-06MAR25 New Design Change Elements Basic , Advanced
-    // AP-06MAR25 Add RichText Area
-    // AP-12MAR25 Add Date
-    ngOnInit() {
-        this.basicElements = [
-            { "type": "Text", "img": "Text", "label": "Text" },
-            { "type": "Number", "img": "Number", "label": "Number" },
-            { "type": "Label", "img": "Label", "label": "Label" },
-            { "type": "Email", "img": "Email", "label": "Email" },
-            { "type": "Date", "img": "Date", "label": "Date" },
-            { "type": "Time", "img": "Time", "label": "Time" },
-            { "type": "DateTime", "img": "DateTime", "label": "DateTime" },
-            { "type": "Calendar", "img": "Calendar", "label": "Calendar" },
-            { "type": "File", "img": "File", "label": "Files" },
-            { "type": "Image", "img": "Image", "label": "Image" },
-            { "type": "Checkbox", "img": "CheckBox", "label": "Checkbox" },
-            { "type": "Radio", "img": "Radio", "label": "Radio" },
-            { "type": "Dropdown", "img": "Drop", "label": "Dropdown" },
-            { "type": "TextArea", "img": "TextArea", "label": "Text Area" },
-            { "type": "RichTextArea", "img": "RichText", "label": "Rich Text" },
-        ];
-        this.advancedElements = [
-            { "type": "Line", "img": "line", "label": "Line" },
-            { "type": "Space", "img": "space", "label": "Space" },
-            { "type": "Boolean", "img": "Boolean", "label": "Boolean" },
-            { "type": "Book", "img": "Search", "label": "Book" },
-            { "type": "List", "img": "Search", "label": "List" },
-            { "type": "Table", "img": "Table", "label": "Table" },
-            { "type": "Button", "img": "Button", "label": "Button" }
-        ];
-        // this.elementDisabledArray = {
-        //   Table: [
-        //     'Book', 'Calendar',"Boolean", 'List', 'Table', 'Checkbox', 'Radio', 
-        //     'Dropdown', 'TextArea', 'RichTextArea', 'Number', 'Label', 'Image', 
-        //     'Email', 'Date', 'Time', 'DateTime', 'Line', 'Space'
-        //   ]
-        // };
-        this.formBuilderService.formElements$.subscribe(elements => {
-            setTimeout(() => {
-                this.formElements = elements.map(field => ({ ...field }));
-            }, 0);
-        });
-        if (this.bookletJSON && (this.bookletJSON !== '')) {
-            this.initializeForm();
-        }
-        else {
-            this.formBuilderService.newBook();
-        }
-        // AP-12MAR25 - Added to handle bookletId
-        if (this.bookletId) {
-            localStorage.setItem('unique_id', this.bookletId);
-        }
-        this.book = this.formBuilderService.getBook();
-        this.formBuilderService.selectedElement$.subscribe(index => {
-            const elements = this.formBuilderService.getElements();
-            if (index >= 0) {
-                this.selectedElement = elements[index];
-            }
-            // SKS19MAR25 for fieldMeta checking
-            if (this.selectedElement?.type === 'Table') {
-                this.selectedElement['fieldsMeta'] = typeof this.selectedElement.fieldsMeta === 'string' ? this.selectedElement.fieldsMeta : JSON.stringify(this.selectedElement['fieldsMeta'] || []);
-            }
-            // this.formElements = [...elements]
-        });
-        this.formBuilderService.addElementWithId();
-    }
-    // Add these methods
-    toggleSection(section) {
-        this.sections[section] = !this.sections[section];
-    }
-    isSectionOpen(section) {
-        return this.sections[section];
-    }
-    // AP - 26FEB25 - Added ngOnChanges to handle changes in bookletJSON
-    ngOnChanges(changes) {
-        if (changes['bookletJSON'] && changes['bookletJSON'].currentValue) {
-            if (this.bookletJSON && this.bookletJSON !== '') {
-                // AP-28MAY25 - Check and transform `action` if it's in Existing format
-                if (this.bookletJSON.questionbook &&
-                    this.bookletJSON.questionbook.action &&
-                    typeof this.bookletJSON.questionbook.action === 'string') {
-                    try {
-                        const parsedActions = JSON.parse(this.bookletJSON.questionbook.action);
-                        // AP-28MAY25 Assign specific positionPercent based on action name
-                        const newActions = parsedActions.map((item, index) => {
-                            const positionPercent = item.name === 'Cancel' ? 3 :
-                                item.name === 'Save' ? 14 : (10 + index * 10);
-                            return {
-                                ...item,
-                                positionPercent: positionPercent,
-                                width: 100,
-                                textColor: "#ffffff",
-                                borderRadius: 6,
-                                id: index + 1
-                            };
-                        });
-                        // AP-28MAY25 Replace the old action string with the newly formatted array
-                        this.bookletJSON.questionbook.action = newActions;
-                    }
-                    catch (e) {
-                        console.error("Error parsing action JSON string:", e);
-                    }
-                }
-                this.initializeForm();
-            }
-            else {
-                this.formBuilderService.newBook();
-            }
-        }
-    }
-    // AP-08APR25 Template is selected, update form elements and emit template mode
-    onTemplateSelected(event) {
-        this.formBuilderService.clearElements();
-        event.elements.forEach(el => this.formBuilderService.addElement(el));
-        // Emit template mode to parent
-        this.templateMode.emit(true);
-    }
-    initializeForm() {
-        if (!this.bookletJSON || !this.bookletJSON.bookQuestionsMap) {
-            console.warn("Invalid bookletJSON structure");
-            return;
-        }
-        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
-    selectElement(index) {
-        this.selectedFieldIndex = index; // element is selected
-        this.formBuilderService.setSelectedElement(index);
-        this.book = this.formBuilderService.getBook();
-        //const element = this.formElements[index];
-        // this.elementButtonClicked.emit(element.type);  
-    }
-    //selectedIndex: number | null = null;
-    selectedFieldIndex = null; // element is cleared
-    selectHeading(event) {
-        this.formBuilderService.selectHeading(event); //AP-10MAR25 Updates the selected heading in the service  
-        this.book = this.formBuilderService.getBook(); //AP-10MAR25 Retrieves the updated book/form data 
-    }
-    // AP-17APR25 generateUiId 
-    generateUiId() {
-        return this.formBuilderService.addElementWithId();
-    }
-    addElement(type) {
-        const unique_id = this.generateUiId();
-        this.currentType = type;
-        if (this.selectedElement?.type === 'Table' && this.addTable) {
-            this.isSelectTablePopup = true;
-        }
-        else {
-            const newElement = {
-                action: null,
-                id: unique_id,
-                type,
-                name: null,
-                questionText: null,
-                question: null,
-                helpText: null,
-                errorMessage: null,
-                isReadOnly: false,
-                isHidden: false,
-                required: false,
-                referenceField: null,
-                additionalRichContent: null,
-                groupName: null,
-                isDateBackward: false,
-                title: null,
-                subTitle: null,
-                size: 12,
-                isDateForward: false,
-                isOptional: false,
-                isTitle: false,
-                nextQuestion: null,
-                allowedFileExtensions: null,
-                questionNumber: this.formBuilderService.getElements().length + 1,
-                order: this.formElements.length + 1,
-                questionBookId: this.bookletId,
-                fieldsMeta: [],
-                trackingId: null,
-                recordId: null,
-                qbReference: null,
-                qbReferenceQuestions: null,
-                primaryKey: false,
-                style: {
-                    labelClass: null,
-                    labelStyle: null,
-                    labelValueStyle: null,
-                    inputClass: null,
-                    inputStyle: null,
-                    showLabel: true,
-                    bookStyle: null,
-                    direction: 'ltr',
-                    questionStyle: null,
-                },
-                subText: this.getDefaultSubText(),
-                imageData: null,
-                boolean: false,
-                options: type === 'Dropdown' || type === 'Radio' || type === 'Checkbox' ? [] : null,
-                imageSize: type === 'Image' ? { width: 150, height: 150 } : null,
-                tableConfig: type === 'Table' ? {
-                    isNosIndicator: true,
-                    addInlineRecord: true,
-                    isPagination: true,
-                    actionButton: true,
-                    isDeleteRow: true,
-                    isEditRow: true,
-                    searchBar: true,
-                    isButtons: true,
-                    itemsPerPage: 10,
-                } : null,
-            };
-            this.formBuilderService.addElement(newElement);
-            this.formElements = this.formBuilderService.getElements();
-            // SKS19MAR25 fieldsmeta check
-            this.formElements = this.formElements.map(ele => {
-                if (ele.type === 'Table') {
-                    ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
-                        ? ele.fieldsMeta
-                        : JSON.stringify(ele.fieldsMeta || []);
-                }
-                return ele;
-            });
-            this.addTable = true;
-        }
-    }
-    // AP-07MAY25 - Added to handle default subText
-    getDefaultSubText() {
-        const defaultData = {
-            endpoint: null,
-            variable: null,
-            field: null,
-            defaultField: null,
-            sourceQuestionId: null,
-            valueField: null,
-            labelField: null,
-            isDependentField: false,
-            dependentValue: null,
-            queryField: null,
-            queryValue: null,
-            queryValueReference: null,
-            uniqueKey: null,
-        };
-        const isEmpty = Object.values(defaultData).every(val => val === null || val === false);
-        return isEmpty ? null : defaultData;
-    }
-    // Remove an element by index
-    removeElement(field, index) {
-        this.formBuilderService.removeElementComponent(field.id);
-        this.formElements = this.formBuilderService.getElements();
-        // SKS19MAR25 fieldsmeta check
-        this.formElements = this.formElements.map(ele => {
-            if (ele.type === 'Table') {
-                ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
-                    ? ele.fieldsMeta
-                    : JSON.stringify(ele.fieldsMeta || []);
-            }
-            return ele;
-        });
-    }
-    onDragStart(event, index) {
-        this.draggedIndex = index;
-        event.dataTransfer?.setData('text/plain', index.toString());
-    }
-    // Allow dropping by preventing default
-    onDragOver(event, index) {
-        event.preventDefault();
-    }
-    // Handle drop event
-    onDrop(event, dropIndex) {
-        event.preventDefault();
-        if (this.draggedIndex === null || this.draggedIndex === dropIndex)
-            return;
-        const draggedItem = this.formElements[this.draggedIndex];
-        // Remove dragged item from old position and insert it in new position
-        this.formElements.splice(this.draggedIndex, 1);
-        this.formElements.splice(dropIndex, 0, draggedItem);
-        //AP-28MAR25 Update questionNumber dynamically based on new order
-        this.formElements.forEach((element, index) => {
-            element.questionNumber = index + 1;
-        });
-        // Reset dragged index
-        this.draggedIndex = null;
-        // Notify service about the update
-        this.formBuilderService.updateElementsOrder(this.formElements);
-    }
-    toggleBoolean(field) {
-        field.boolean = !field.boolean;
-    }
-    getFontStyles(field) {
-        const styles = {
-            'font-family': field.font || 'Helvetica Neue',
-            'font-weight': field.fontWeight || '400',
-            'font-size': field.fontSize || '14px',
-            'width': field.size ? `${(field.size / 12) * 100}%` : '100%',
-            'text-align': field.textAlign || 'left',
-            'border-radius': '5px',
-            'border-width': field.lineWidth ? `${field.lineWidth}px` : '1px',
-            // 'border-style': field.lineStyle?.toLowerCase() || 'solid',
-            'color': field.fontColor || '#000000',
-            // 'border-color': field.color || '#EFF8FF', 
-            'margin-top': field.paddingTop ? `${field.paddingTop}px` : '0px',
-            'margin-bottom': field.paddingBottom ? `${field.paddingBottom}px` : '10px'
-        };
-        return styles;
-    }
-    getLineStyles(field) {
-        const styles = {
-            'font-family': field.font || 'Helvetica Neue',
-            'font-weight': field.fontWeight || '400',
-            'font-size': field.fontSize || '14px',
-            'width': field.size ? `${(field.size / 12) * 100}%` : '100%',
-            'text-align': field.textAlign || 'left',
-            'border-radius': '5px',
-            'border-width': field.lineWidth ? `${field.lineWidth}px` : '1px',
-            'border-style': field.lineStyle?.toLowerCase() || 'solid',
-            'color': field.fontColor || '#000000',
-            //'border-color': field.color || '#EFF8FF', 
-            'margin-top': field.paddingTop ? `${field.paddingTop}px` : '0px',
-            'margin-bottom': field.paddingBottom ? `${field.paddingBottom}px` : '10px'
-        };
-        return styles;
-    }
-    // SKS13MAR25 table popup conformation based element add
-    onClose() {
-        this.isSelectTablePopup = false;
-        this.addTable = false;
-        this.addElement(this.currentType);
-    }
-    // SKS13MAR25 column element add inside a table
-    addOnTable() {
-        this.addTable = true;
-        this.isSelectTablePopup = false;
-        const elements = [...this.formBuilderService.getElements()];
-        // Find the element and update its columns
-        const index = elements.findIndex(el => el.id === this.selectedElement.id);
-        const rowNum = this.formElements[index].columns ? this.formElements[index].columns?.length : 0;
-        const unique_id = this.generateUiId();
-        const tableElement = {
-            label: `HEADER LABEL ${rowNum}`,
-            fieldName: `FIELD NAME${rowNum}`,
-            type: this.currentType,
-            id: unique_id
-        };
-        this.formBuilderService.addTableElement(tableElement, this.selectedFieldIndex);
-        this.formElements = this.formBuilderService.getElements();
-        // SKS19MAR25 fieldsmeta checking
-        this.formElements = this.formElements.map(ele => {
-            if (ele.type === 'Table') {
-                ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
-                    ? ele.fieldsMeta
-                    : JSON.stringify(ele.fieldsMeta || []);
-            }
-            return ele;
-        });
-        // this.addTableData(unique_id, fieldName)
-    }
-    addTableData(fieldId, fieldName) {
-        // this.formBuilderService.addTablefieldData(tableElement);
-    }
-    columnSelected(event) {
-        // console.log(event)
-        // SKS19MAR25 table column update
-        this.formBuilderService.setSelectedTableElement(this.selectedFieldIndex, event);
-    }
-    removeColumn(event) {
-        // console.log(event)
-        this.formBuilderService.removeSelectedTableElement(this.selectedFieldIndex, event);
-    }
-    // SKS25MAR25 image add
-    async fileChangeEvent(index, event) {
-        const file = event.target.files[0];
-        if (file) {
-            try {
-                const imageData = await this.readFileAsDataURL(file);
-                this.formElements[index].imageData = imageData;
-                this.formElements[index].orgImageData = imageData;
-                // Initialize logo size if not already set
-                if (!this.formElements[index].imageSize) {
-                    this.formElements[index].imageSize = { width: 150, height: 150 };
-                }
-                await this.formBuilderService.elementUpdate(index, this.formElements[index]);
-            }
-            catch (error) {
-                console.error("Error reading file:", error);
-            }
-        }
-    }
-    readFileAsDataURL(file) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
-            reader.onerror = (error) => reject(error);
-            reader.readAsDataURL(file);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], 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" }, 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</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</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 class=\"field-container\"\n      style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n      (click)=\"selectHeading('Header')\">\n      <div class=\"label-container\" style=\"padding: 10px;\">\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    </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\">{{\n                  field.questionText ? field.questionText : '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'\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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</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.isRequired\"></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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\">{{ field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\"> {{ field.questionText ? field.questionText : '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'\"\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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'\"\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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 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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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 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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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=\"checkbox-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 : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : 'Label' }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable  isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                (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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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...\" [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>These element want to add a table</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">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 img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-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}.element.disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "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"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-element', standalone: true, imports: [QuestionbookComponent, CommonModule, FormsModule, BookletComponent, NxtDatatable], 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</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</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 class=\"field-container\"\n      style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n      (click)=\"selectHeading('Header')\">\n      <div class=\"label-container\" style=\"padding: 10px;\">\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    </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\">{{\n                  field.questionText ? field.questionText : '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'\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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</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.isRequired\"></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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\">{{ field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\"> {{ field.questionText ? field.questionText : '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'\"\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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'\"\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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 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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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 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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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=\"checkbox-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 : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : 'Label' }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable  isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                (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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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...\" [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>These element want to add a table</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">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 img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-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}.element.disabled{opacity:.5;cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { bookletJSON: [{
-                type: Input
-            }], bookletId: [{
-                type: Input
-            }], templateMode: [{
-                type: Output
-            }] } });
-
-class PropertiesComponent {
-    http;
-    formBuilderService;
-    templateService;
-    formButtonHandler = new EventEmitter();
-    templateSaveHandler = new EventEmitter();
-    selectedOption = '';
-    selectedElementIndex = -1;
-    selectedElementType = '';
-    selectedAlign = 'align-left'; // Add this property
-    selectedStyles = []; // Using array since multiple styles can be selected
-    errorMessage = '';
-    selectedElement = null; // Receive the selected element
-    headerSelect = false;
-    bookId;
-    book;
-    activeTab = 'attributes';
-    selectColumn;
-    transform = {
-        translateUnit: 'px',
-        scale: 1,
-        rotate: 0,
-        flipH: false,
-        flipV: false,
-        translateH: 0,
-        translateV: 0
-    };
-    canvasRotation = 0;
-    cropper;
-    loading = false;
-    cropperMaxHeight = 0;
-    cropperMaxWidth = 0;
-    cropperMinHeight = 0;
-    cropperMinWidth = 0;
-    cropperStaticWidth = 0;
-    cropperStaticHeight = 0;
-    aspectRatio = 4 / 3;
-    roundCropper = false;
-    imageChangedEvent = null;
-    alignImage = 'center';
-    //  "endpoint": "https://dev-api.valarhr.com/nxt",
-    // SKS28MAR25 default book search endpoint
-    bookSubtext = {
-        "endpoint": "https://dev-api.valarhr.com/nxt",
-        "variable": null,
-        "field": ['label', 'name'],
-        "defaultField": "label"
-    };
-    isLinkDropdownOpen = false;
+    activeTab = 'attributes';
+    selectColumn;
+    transform = {
+        translateUnit: 'px',
+        scale: 1,
+        rotate: 0,
+        flipH: false,
+        flipV: false,
+        translateH: 0,
+        translateV: 0
+    };
+    canvasRotation = 0;
+    cropper;
+    loading = false;
+    cropperMaxHeight = 0;
+    cropperMaxWidth = 0;
+    cropperMinHeight = 0;
+    cropperMinWidth = 0;
+    cropperStaticWidth = 0;
+    cropperStaticHeight = 0;
+    aspectRatio = 4 / 3;
+    roundCropper = false;
+    imageChangedEvent = null;
+    alignImage = 'center';
+    //  "endpoint": "https://dev-api.valarhr.com/nxt",
+    // SKS28MAR25 default book search endpoint
+    bookSubtext = {
+        "endpoint": "https://dev-api.valarhr.com/nxt",
+        "variable": null,
+        "field": ['label', 'name'],
+        "defaultField": "label"
+    };
+    isLinkDropdownOpen = false;
     templateSelected = false;
     dropdown;
     draggedId = null;
@@ -21790,272 +21188,739 @@ class PropertiesComponent {
         });
         this.formBuilderService.elementUpdate(this.selectedElementIndex, this.selectedElement);
     }
-    getStyleKeys() {
-        if (!this.selectedElement || !this.selectedElement.style || typeof this.selectedElement.style !== 'object') {
-            return [];
+    getStyleKeys() {
+        if (!this.selectedElement || !this.selectedElement.style || typeof this.selectedElement.style !== 'object') {
+            return [];
+        }
+        return Object.keys(this.selectedElement.style);
+    }
+    // SKS19MAR25 update element in servies
+    updateElement(element) {
+        this.formBuilderService.elementUpdate(this.selectedElementIndex, element);
+        if (this.selectedElement?.type === 'Table' && this.selectColumn) {
+            this.selectedElement['fieldsMeta'] = typeof this.selectedElement?.fieldsMeta === 'object' ? this.selectedElement?.fieldsMeta : JSON.parse(this.selectedElement.fieldsMeta || []);
+            const foundItem = this.selectedElement['fieldsMeta'].find(item => item['uniqueIdentifier'] === this.selectColumn);
+            this.formBuilderService.setSelectedTableElement(this.selectedElementIndex, { column: foundItem?.apiName || null });
+        }
+    }
+    // SKS19MAR25 get value from array
+    getValueByArrayPath(targetArrayPath, targetArrayKey, selectColumn, keyPath) {
+        if (this.selectedElement?.type === 'Table') {
+            this.selectedElement['fieldsMeta'] = typeof this.selectedElement?.fieldsMeta === 'object' ? this.selectedElement?.fieldsMeta : JSON.parse(this.selectedElement['fieldsMeta'] || []);
+        }
+        const targetArray = this.getDataByPath(targetArrayPath);
+        if (!Array.isArray(targetArray))
+            return '';
+        const foundItem = targetArray.find(item => item[targetArrayKey] === selectColumn);
+        return foundItem ? keyPath.split('.').reduce((obj, key) => obj?.[key], foundItem) : '';
+    }
+    //SKS19MAR25 Function to update a value in an array dynamically
+    updateValueByArrayPath(targetArrayPath, targetArrayKey, selectColumn, keyPath, event) {
+        if (this.selectedElement?.type === 'Table') {
+            this.selectedElement['fieldsMeta'] = typeof this.selectedElement?.fieldsMeta === 'object' ? this.selectedElement?.fieldsMeta : JSON.parse(this.selectedElement['fieldsMeta'] || []);
+        }
+        const targetArray = this.getDataByPath(targetArrayPath);
+        // console.log("targetArray", targetArray, "targetArrayKey", targetArrayKey, "selectColumn", selectColumn, "keyPath", keyPath, "event", event)
+        if (!Array.isArray(targetArray))
+            return;
+        // Find the object that matches selectColumn
+        let foundItem = targetArray.find(item => item[targetArrayKey] === selectColumn);
+        // If the item does not exist, create and add it
+        if (!foundItem) {
+            foundItem = { [targetArrayKey]: selectColumn }; // Ensure the key exists
+            targetArray.push(foundItem);
+        }
+        // Traverse and set the value
+        const keys = keyPath.split('.');
+        let obj = foundItem;
+        for (let i = 0; i < keys.length - 1; i++) {
+            const key = keys[i];
+            if (!obj[key])
+                obj[key] = {}; // Initialize missing objects
+            obj = obj[key];
+        }
+        // Assign the value based on input type
+        const lastKey = keys[keys.length - 1];
+        const inputElement = event.target;
+        obj[lastKey] = inputElement?.type === 'checkbox' ? inputElement.checked : inputElement.value;
+        if (keyPath === 'summaryColumn') {
+            if (obj['summaryRow'] === true) {
+                obj['summaryRow'] = false;
+            }
+            if (inputElement.checked === true) {
+                obj['fldType'] = 'calculation';
+            }
+            else {
+                obj['fldType'] = 'Text';
+            }
+        }
+        if (keyPath === 'summaryRow') {
+            if (obj['summaryColumn'] === true) {
+                obj['summaryColumn'] = false;
+            }
+            if (inputElement.checked === true) {
+                obj['fldType'] = 'calculation';
+            }
+            else {
+                obj['fldType'] = 'Text';
+            }
+        }
+        if (this.selectedElement?.type === 'Table') {
+            this.selectedElement['fieldsMeta'] = typeof this.selectedElement?.fieldsMeta === 'object' ? JSON.stringify(this.selectedElement?.fieldsMeta) : this.selectedElement['fieldsMeta'] || [];
+        }
+        this.updateElement(this.selectedElement);
+    }
+    getDataByPath(path) {
+        if (this.selectedElement?.type === 'Table') {
+            this.selectedElement['fieldsMeta'] = typeof this.selectedElement?.fieldsMeta === 'object' ? this.selectedElement?.fieldsMeta : JSON.parse(this.selectedElement['fieldsMeta'] || []);
+        }
+        return path.split('.').reduce((obj, key) => obj?.[key], this.selectedElement);
+    }
+    // SKS25MAR25 image edit functions
+    flipHorizontal() {
+        this.transform = {
+            ...this.transform,
+            flipH: !this.transform.flipH
+        };
+    }
+    flipVertical() {
+        this.transform = {
+            ...this.transform,
+            flipV: !this.transform.flipV
+        };
+    }
+    resetImage() {
+        this.canvasRotation = 0;
+        this.cropper = undefined;
+        this.transform = {
+            translateUnit: 'px',
+            scale: 1,
+            rotate: 0,
+            flipH: false,
+            flipV: false,
+            translateH: 0,
+            translateV: 0
+        };
+    }
+    zoomOut() {
+        this.transform = {
+            ...this.transform,
+            scale: this.transform.scale - .1
+        };
+    }
+    zoomIn() {
+        this.transform = {
+            ...this.transform,
+            scale: this.transform.scale + .1
+        };
+    }
+    rotateLeft() {
+        this.loading = true;
+        setTimeout(() => {
+            this.canvasRotation--;
+            this.flipAfterRotate();
+        });
+    }
+    rotateRight() {
+        this.loading = true;
+        setTimeout(() => {
+            this.canvasRotation++;
+            this.flipAfterRotate();
+        });
+    }
+    moveLeft() {
+        this.transform = {
+            ...this.transform,
+            translateH: this.transform.translateH - 1
+        };
+    }
+    moveRight() {
+        this.transform = {
+            ...this.transform,
+            translateH: this.transform.translateH + 1
+        };
+    }
+    moveDown() {
+        this.transform = {
+            ...this.transform,
+            translateV: this.transform.translateV + 1
+        };
+    }
+    moveUp() {
+        this.transform = {
+            ...this.transform,
+            translateV: this.transform.translateV - 1
+        };
+    }
+    flipAfterRotate() {
+        const flippedH = this.transform.flipH;
+        const flippedV = this.transform.flipV;
+        this.transform = {
+            ...this.transform,
+            flipH: flippedV,
+            flipV: flippedH,
+            translateH: 0,
+            translateV: 0
+        };
+    }
+    async imageCropped(event) {
+        try {
+            const base64 = await this.convertBlobToBase64(event.objectUrl);
+            this.selectedElement.imageData = base64;
+            await this.formBuilderService.elementUpdate(this.selectedElementIndex, this.selectedElement);
+            // console.log('CROPPED', event);
+        }
+        catch (error) {
+            console.error("Error in imageCropped:", error);
+        }
+    }
+    cropperReady(sourceImageDimensions) {
+        // console.log('Cropper ready', sourceImageDimensions);
+        this.loading = false;
+    }
+    // SKS25MAR25 blob to base 64 converter
+    convertBlobToBase64(objectUrl) {
+        return fetch(objectUrl)
+            .then(response => response.blob())
+            .then(blob => {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.readAsDataURL(blob);
+                reader.onloadend = () => resolve(reader.result);
+                reader.onerror = error => reject(error);
+            });
+        });
+    }
+    // SKS28MAR25 qb book update in book element
+    childEventCapture(event) {
+        this.selectedElement.qbReference = event.valueObj?.name;
+        this.selectedElement.qbReferenceQuestions = event.valueObj?.jsonBody;
+        this.formBuilderService.elementUpdate(this.selectedElementIndex, this.selectedElement);
+    }
+    // SKS28MAR25 book search dropdown emit
+    linkToggleDropdown(event) {
+        event.stopPropagation();
+        this.isLinkDropdownOpen = !this.isLinkDropdownOpen;
+    }
+    // SKS28MAR25 book search dropdown close
+    onClickOutside(event) {
+        if (this.dropdown && !this.dropdown.nativeElement.contains(event.target)) {
+            this.isLinkDropdownOpen = false;
         }
-        return Object.keys(this.selectedElement.style);
     }
-    // SKS19MAR25 update element in servies
-    updateElement(element) {
-        this.formBuilderService.elementUpdate(this.selectedElementIndex, element);
-        if (this.selectedElement?.type === 'Table' && this.selectColumn) {
-            this.selectedElement['fieldsMeta'] = typeof this.selectedElement?.fieldsMeta === 'object' ? this.selectedElement?.fieldsMeta : JSON.parse(this.selectedElement.fieldsMeta || []);
-            const foundItem = this.selectedElement['fieldsMeta'].find(item => item['uniqueIdentifier'] === this.selectColumn);
-            this.formBuilderService.setSelectedTableElement(this.selectedElementIndex, { column: foundItem?.apiName || null });
-        }
+    // AP-28MAR25 When drag starts, store the index
+    onDragStart(event, id) {
+        this.draggedId = id;
+        event.dataTransfer.effectAllowed = "move";
     }
-    // SKS19MAR25 get value from array
-    getValueByArrayPath(targetArrayPath, targetArrayKey, selectColumn, keyPath) {
-        if (this.selectedElement?.type === 'Table') {
-            this.selectedElement['fieldsMeta'] = typeof this.selectedElement?.fieldsMeta === 'object' ? this.selectedElement?.fieldsMeta : JSON.parse(this.selectedElement['fieldsMeta'] || []);
+    // AP-28MAR25 Prevent default behavior to allow drop
+    onDragOver(event) {
+        event.preventDefault();
+    }
+    // AP-28MAR25 Swap the dragged item with the dropped position
+    onDrop(event, key) {
+        event.preventDefault();
+        const targetId = event.target.closest(".option-items")?.getAttribute("data-id");
+        if (this.draggedId && targetId && this.draggedId !== targetId) {
+            const options = this.selectedElement[key];
+            [options[this.draggedId], options[targetId]] = [options[targetId], options[this.draggedId]];
+            // Find the indexes of the dragged and target options
+            const draggedIndex = options.findIndex(option => option.id === this.draggedId);
+            const targetIndex = options.findIndex(option => option.id === targetId);
+            // Swap the items
+            if (draggedIndex !== -1 && targetIndex !== -1) {
+                [options[draggedIndex], options[targetIndex]] = [options[targetIndex], options[draggedIndex]];
+            }
         }
-        const targetArray = this.getDataByPath(targetArrayPath);
-        if (!Array.isArray(targetArray))
-            return '';
-        const foundItem = targetArray.find(item => item[targetArrayKey] === selectColumn);
-        return foundItem ? keyPath.split('.').reduce((obj, key) => obj?.[key], foundItem) : '';
+        this.draggedId = null;
     }
-    //SKS19MAR25 Function to update a value in an array dynamically
-    updateValueByArrayPath(targetArrayPath, targetArrayKey, selectColumn, keyPath, event) {
-        if (this.selectedElement?.type === 'Table') {
-            this.selectedElement['fieldsMeta'] = typeof this.selectedElement?.fieldsMeta === 'object' ? this.selectedElement?.fieldsMeta : JSON.parse(this.selectedElement['fieldsMeta'] || []);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1.HttpClient }, { token: FormBuilderService }, { token: TemplateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, isStandalone: true, selector: "app-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      Attributes\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      Property\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      Appearance\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!-- AP-06MAR25 Select element type show -->\n    <div *ngIf=\"getProperties()\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'Image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search book specific for book element -->\n      <div *ngIf=\"selectedElement?.type === 'Book'\">\n        <label class=\"text-sm\">Search Book</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <lib-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n            (searchValueChange)=\"childEventCapture($event)\">\n          </lib-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>Endpoint:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>Variable:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>Field:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>Default Field:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- help text -->\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n            selectedElement.helpText }}</div>\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">Select file category</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n          </div>\n\n          <!--AP-11JUN25 - Show this section only if the property key is 'primaryKey' -->\n          <div *ngIf=\"prop.key === 'primaryKey'\">\n            <input type=\"checkbox\" [checked]=\"getValueByPath('primaryKey')\" [disabled]=\"!getValueByPath('primaryKey') && isAnotherIdSelected()\" (change)=\"onToggleChange('primaryKey', $event)\"/>\n            <span class=\"toggle-label\" style=\"padding-left: 10px;\">primaryKey</span>\n          </div>\n\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{ prop.label }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!-- AP 25FEB25 - Change key size -->\n          <div *ngIf=\"prop.key === 'size'\">\n            <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n              class=\"size-input\" />\n          </div>\n\n          <!-- AP-19MAR25 Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n        \n         <!-- AP 23MAY25 - Action Button -->\n        <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n          <div class=\"form-header\">\n            <label class=\"form-label\">{{ prop.label }}</label>\n            <button (click)=\"addNewButton()\" class=\"add-button\">+ Add Button</button>\n          </div>\n        \n          <div *ngFor=\"let btn of book?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n            <div class=\"form-group\">\n              <label>Button Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event)\" placeholder=\"Enter button name\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Event Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Alt</label>\n              <input type=\"text\" [(ngModel)]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Endpoint</label>\n              <input type=\"text\" [(ngModel)]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Method</label>\n              <select [(ngModel)]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n                <option [value]=\"'GET'\">GET</option>\n                <option [value]=\"'POST'\">POST</option>\n                <option [value]=\"'PUT'\">PUT</option>\n                <option [value]=\"'DELETE'\">DELETE</option>\n              </select>\n            </div>\n        \n            <!-- AP 23MAY25 - Action Style Fields -->\n            <div class=\"form-group\">\n              <label>Background Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Border Radius</label>\n              <input type=\"range\" min=\"0\" max=\"50\" [(ngModel)]=\"btn.borderRadius\" \n                     (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n              <span>{{ btn.borderRadius }}px</span>\n            </div>            \n            \n            <div class=\"form-group\">\n              <label>Button Width (px)</label>\n              <input type=\"number\" [(ngModel)]=\"btn.width\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Text Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.textColor\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Position (%)</label>\n              <input type=\"range\" min=\"0\" max=\"100\" [(ngModel)]=\"btn.positionPercent\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n              <span>{{ btn.positionPercent }}%</span>\n            </div>\n            <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 Remove</button>\n          </div>\n        </div>\n        \n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!-- AP-06MAR25 Show elements ID  -->\n    <div *ngIf=\"getProperties()\">\n      <label>Label Id</label>\n      <div\n        style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n                  (change)=\"onRequiredChange($event.target.checked)\" />\n                Required\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n                  (change)=\"onToggleChange('isReadOnly', $event)\" />\n                Read Only\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n                  (change)=\"onToggleChange('isHidden', $event)\" />\n                Is Hide\n              </label>\n            </div>\n          </div>\n\n          <!-- AP 28FEB25 - handled options with UUID -->\n          <div\n            *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n\n      <!-- SKS21MAR25 Move Style Outside the Loop -->\n      <!-- Style Toggle -->\n      <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n        <div class=\"head-elements\">Style</div>\n        <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n          alt=\"Toggle Arrow\" class=\"arrow-icon\">\n      </div>\n\n      <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n        <div class=\"form-group\">\n          <div *ngFor=\"let key of getStyleKeys()\">\n            <label>{{ key }}</label>\n            <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n              (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <!-- Font Selection -->\n          <div *ngIf=\"prop.key === 'font'\">\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n              (change)=\"setValueByPath('font', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n          <!-- Font Size Selection -->\n          <div *ngIf=\"prop.key === 'fontSize'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n          <!-- Font Weight Selection -->\n          <div *ngIf=\"prop.key === 'fontWeight'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n\n          <div class=\"flex-container\">\n            <!-- Dropdown Box -->\n            <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n              <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n                <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                  {{ option }}\n                </option>\n              </select>\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n                (change)=\"setValueByPath('fontColor', $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n                (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n          </div>\n          \n          <!-- AP-17APR25 Button for Duplicate Field  -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n  <button type=\"button\"\n    class=\"toggle-button\"\n    (click)=\"duplicateField(selectedElement)\">\n    Add Duplicate\n  </button>\n</div>\n\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n  <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{margin-left:10px;cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.add-button{padding:8px 14px;background-color:#0954c5;color:#fff;border:none;border-radius:8px;cursor:pointer}.add-button:hover{background-color:#0954c5}.button-config-card{background-color:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.form-group{margin-bottom:12px}.form-group label{display:block;font-weight:600;margin-bottom:6px}.form-group input,.form-group select{padding:8px 10px;border:1px solid #ccc;border-radius:6px}.remove-button{background-color:#e74c3c;color:#fff;border:none;padding:6px 12px;margin-top:10px;border-radius:6px;cursor:pointer}.remove-button:hover{background-color:#c0392b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "filterName"], outputs: ["searchValueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-properties', standalone: true, imports: [CommonModule, FormsModule, ImageCropperComponent, SearchBoxComponent], template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      Attributes\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      Property\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      Appearance\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!-- AP-06MAR25 Select element type show -->\n    <div *ngIf=\"getProperties()\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'Image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search book specific for book element -->\n      <div *ngIf=\"selectedElement?.type === 'Book'\">\n        <label class=\"text-sm\">Search Book</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <lib-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n            (searchValueChange)=\"childEventCapture($event)\">\n          </lib-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>Endpoint:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>Variable:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>Field:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>Default Field:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- help text -->\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n            selectedElement.helpText }}</div>\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">Select file category</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n          </div>\n\n          <!--AP-11JUN25 - Show this section only if the property key is 'primaryKey' -->\n          <div *ngIf=\"prop.key === 'primaryKey'\">\n            <input type=\"checkbox\" [checked]=\"getValueByPath('primaryKey')\" [disabled]=\"!getValueByPath('primaryKey') && isAnotherIdSelected()\" (change)=\"onToggleChange('primaryKey', $event)\"/>\n            <span class=\"toggle-label\" style=\"padding-left: 10px;\">primaryKey</span>\n          </div>\n\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{ prop.label }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!-- AP 25FEB25 - Change key size -->\n          <div *ngIf=\"prop.key === 'size'\">\n            <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n              class=\"size-input\" />\n          </div>\n\n          <!-- AP-19MAR25 Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n        \n         <!-- AP 23MAY25 - Action Button -->\n        <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n          <div class=\"form-header\">\n            <label class=\"form-label\">{{ prop.label }}</label>\n            <button (click)=\"addNewButton()\" class=\"add-button\">+ Add Button</button>\n          </div>\n        \n          <div *ngFor=\"let btn of book?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n            <div class=\"form-group\">\n              <label>Button Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event)\" placeholder=\"Enter button name\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Event Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Alt</label>\n              <input type=\"text\" [(ngModel)]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Endpoint</label>\n              <input type=\"text\" [(ngModel)]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Method</label>\n              <select [(ngModel)]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n                <option [value]=\"'GET'\">GET</option>\n                <option [value]=\"'POST'\">POST</option>\n                <option [value]=\"'PUT'\">PUT</option>\n                <option [value]=\"'DELETE'\">DELETE</option>\n              </select>\n            </div>\n        \n            <!-- AP 23MAY25 - Action Style Fields -->\n            <div class=\"form-group\">\n              <label>Background Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Border Radius</label>\n              <input type=\"range\" min=\"0\" max=\"50\" [(ngModel)]=\"btn.borderRadius\" \n                     (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n              <span>{{ btn.borderRadius }}px</span>\n            </div>            \n            \n            <div class=\"form-group\">\n              <label>Button Width (px)</label>\n              <input type=\"number\" [(ngModel)]=\"btn.width\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Text Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.textColor\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Position (%)</label>\n              <input type=\"range\" min=\"0\" max=\"100\" [(ngModel)]=\"btn.positionPercent\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n              <span>{{ btn.positionPercent }}%</span>\n            </div>\n            <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 Remove</button>\n          </div>\n        </div>\n        \n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!-- AP-06MAR25 Show elements ID  -->\n    <div *ngIf=\"getProperties()\">\n      <label>Label Id</label>\n      <div\n        style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n                  (change)=\"onRequiredChange($event.target.checked)\" />\n                Required\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n                  (change)=\"onToggleChange('isReadOnly', $event)\" />\n                Read Only\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n                  (change)=\"onToggleChange('isHidden', $event)\" />\n                Is Hide\n              </label>\n            </div>\n          </div>\n\n          <!-- AP 28FEB25 - handled options with UUID -->\n          <div\n            *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n\n      <!-- SKS21MAR25 Move Style Outside the Loop -->\n      <!-- Style Toggle -->\n      <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n        <div class=\"head-elements\">Style</div>\n        <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n          alt=\"Toggle Arrow\" class=\"arrow-icon\">\n      </div>\n\n      <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n        <div class=\"form-group\">\n          <div *ngFor=\"let key of getStyleKeys()\">\n            <label>{{ key }}</label>\n            <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n              (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <!-- Font Selection -->\n          <div *ngIf=\"prop.key === 'font'\">\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n              (change)=\"setValueByPath('font', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n          <!-- Font Size Selection -->\n          <div *ngIf=\"prop.key === 'fontSize'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n          <!-- Font Weight Selection -->\n          <div *ngIf=\"prop.key === 'fontWeight'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n\n          <div class=\"flex-container\">\n            <!-- Dropdown Box -->\n            <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n              <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n                <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                  {{ option }}\n                </option>\n              </select>\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n                (change)=\"setValueByPath('fontColor', $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n                (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n          </div>\n          \n          <!-- AP-17APR25 Button for Duplicate Field  -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n  <button type=\"button\"\n    class=\"toggle-button\"\n    (click)=\"duplicateField(selectedElement)\">\n    Add Duplicate\n  </button>\n</div>\n\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n  <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{margin-left:10px;cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.add-button{padding:8px 14px;background-color:#0954c5;color:#fff;border:none;border-radius:8px;cursor:pointer}.add-button:hover{background-color:#0954c5}.button-config-card{background-color:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.form-group{margin-bottom:12px}.form-group label{display:block;font-weight:600;margin-bottom:6px}.form-group input,.form-group select{padding:8px 10px;border:1px solid #ccc;border-radius:6px}.remove-button{background-color:#e74c3c;color:#fff;border:none;padding:6px 12px;margin-top:10px;border-radius:6px;cursor:pointer}.remove-button:hover{background-color:#c0392b}\n"] }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: FormBuilderService }, { type: TemplateService }], propDecorators: { formButtonHandler: [{
+                type: Output
+            }], templateSaveHandler: [{
+                type: Output
+            }], selectedElementType: [{
+                type: Input
+            }], templateSelected: [{
+                type: Input
+            }], dropdown: [{
+                type: ViewChild,
+                args: ['dropdown', { static: false }]
+            }], onClickOutside: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+// AP 22JAN25 - form preview and All form elements
+class ElementComponent {
+    formBuilderService;
+    //@Output() elementButtonClicked = new EventEmitter<string>();
+    bookletJSON;
+    bookletId;
+    templateMode = new EventEmitter();
+    field;
+    formElements = [];
+    elements = [];
+    bookId;
+    sections = {
+        basic: true, // Basic Elements open by default
+        advanced: true // Advanced Elements closed by default
+    };
+    basicElements = [];
+    advancedElements = [];
+    //elementDisabledArray: any;
+    version = VERSION.version; //SKS10MAR25 get version from environment/version.ts 
+    book;
+    selectedElement = null;
+    isSelectTablePopup = false;
+    currentType;
+    addTable = true;
+    dots = Array(6);
+    draggedIndex = null;
+    templateSelected = false;
+    //subscription: any;
+    constructor(formBuilderService) {
+        this.formBuilderService = formBuilderService;
+    }
+    //  AP-06MAR25 New Design Change Elements Basic , Advanced
+    // AP-06MAR25 Add RichText Area
+    // AP-12MAR25 Add Date
+    ngOnInit() {
+        this.basicElements = [
+            { "type": "Text", "img": "Text", "label": "Text" },
+            { "type": "Number", "img": "Number", "label": "Number" },
+            { "type": "Label", "img": "Label", "label": "Label" },
+            { "type": "Email", "img": "Email", "label": "Email" },
+            { "type": "Date", "img": "Date", "label": "Date" },
+            { "type": "Time", "img": "Time", "label": "Time" },
+            { "type": "DateTime", "img": "DateTime", "label": "DateTime" },
+            { "type": "Calendar", "img": "Calendar", "label": "Calendar" },
+            { "type": "File", "img": "File", "label": "Files" },
+            { "type": "Image", "img": "Image", "label": "Image" },
+            { "type": "Checkbox", "img": "CheckBox", "label": "Checkbox" },
+            { "type": "Radio", "img": "Radio", "label": "Radio" },
+            { "type": "Dropdown", "img": "Drop", "label": "Dropdown" },
+            { "type": "TextArea", "img": "TextArea", "label": "Text Area" },
+            { "type": "RichTextArea", "img": "RichText", "label": "Rich Text" },
+        ];
+        this.advancedElements = [
+            { "type": "Line", "img": "line", "label": "Line" },
+            { "type": "Space", "img": "space", "label": "Space" },
+            { "type": "Boolean", "img": "Boolean", "label": "Boolean" },
+            { "type": "Book", "img": "Search", "label": "Book" },
+            { "type": "List", "img": "Search", "label": "List" },
+            { "type": "Table", "img": "Table", "label": "Table" },
+            { "type": "Button", "img": "Button", "label": "Button" }
+        ];
+        // this.elementDisabledArray = {
+        //   Table: [
+        //     'Book', 'Calendar',"Boolean", 'List', 'Table', 'Checkbox', 'Radio', 
+        //     'Dropdown', 'TextArea', 'RichTextArea', 'Number', 'Label', 'Image', 
+        //     'Email', 'Date', 'Time', 'DateTime', 'Line', 'Space'
+        //   ]
+        // };
+        this.formBuilderService.formElements$.subscribe(elements => {
+            setTimeout(() => {
+                this.formElements = elements.map(field => ({ ...field }));
+            }, 0);
+        });
+        if (this.bookletJSON && (this.bookletJSON !== '')) {
+            this.initializeForm();
         }
-        const targetArray = this.getDataByPath(targetArrayPath);
-        // console.log("targetArray", targetArray, "targetArrayKey", targetArrayKey, "selectColumn", selectColumn, "keyPath", keyPath, "event", event)
-        if (!Array.isArray(targetArray))
-            return;
-        // Find the object that matches selectColumn
-        let foundItem = targetArray.find(item => item[targetArrayKey] === selectColumn);
-        // If the item does not exist, create and add it
-        if (!foundItem) {
-            foundItem = { [targetArrayKey]: selectColumn }; // Ensure the key exists
-            targetArray.push(foundItem);
+        else {
+            this.formBuilderService.newBook();
         }
-        // Traverse and set the value
-        const keys = keyPath.split('.');
-        let obj = foundItem;
-        for (let i = 0; i < keys.length - 1; i++) {
-            const key = keys[i];
-            if (!obj[key])
-                obj[key] = {}; // Initialize missing objects
-            obj = obj[key];
+        // AP-12MAR25 - Added to handle bookletId
+        if (this.bookletId) {
+            localStorage.setItem('unique_id', this.bookletId);
         }
-        // Assign the value based on input type
-        const lastKey = keys[keys.length - 1];
-        const inputElement = event.target;
-        obj[lastKey] = inputElement?.type === 'checkbox' ? inputElement.checked : inputElement.value;
-        if (keyPath === 'summaryColumn') {
-            if (obj['summaryRow'] === true) {
-                obj['summaryRow'] = false;
-            }
-            if (inputElement.checked === true) {
-                obj['fldType'] = 'calculation';
-            }
-            else {
-                obj['fldType'] = 'Text';
+        this.book = this.formBuilderService.getBook();
+        this.formBuilderService.selectedElement$.subscribe(index => {
+            const elements = this.formBuilderService.getElements();
+            if (index >= 0) {
+                this.selectedElement = elements[index];
             }
-        }
-        if (keyPath === 'summaryRow') {
-            if (obj['summaryColumn'] === true) {
-                obj['summaryColumn'] = false;
+            // SKS19MAR25 for fieldMeta checking
+            if (this.selectedElement?.type === 'Table') {
+                this.selectedElement['fieldsMeta'] = typeof this.selectedElement.fieldsMeta === 'string' ? this.selectedElement.fieldsMeta : JSON.stringify(this.selectedElement['fieldsMeta'] || []);
             }
-            if (inputElement.checked === true) {
-                obj['fldType'] = 'calculation';
+            // this.formElements = [...elements]
+        });
+        this.formBuilderService.addElementWithId();
+    }
+    // Add these methods
+    toggleSection(section) {
+        this.sections[section] = !this.sections[section];
+    }
+    isSectionOpen(section) {
+        return this.sections[section];
+    }
+    // AP - 26FEB25 - Added ngOnChanges to handle changes in bookletJSON
+    ngOnChanges(changes) {
+        if (changes['bookletJSON'] && changes['bookletJSON'].currentValue) {
+            if (this.bookletJSON && this.bookletJSON !== '') {
+                // AP-28MAY25 - Check and transform `action` if it's in Existing format
+                if (this.bookletJSON.questionbook &&
+                    this.bookletJSON.questionbook.action &&
+                    typeof this.bookletJSON.questionbook.action === 'string') {
+                    try {
+                        const parsedActions = JSON.parse(this.bookletJSON.questionbook.action);
+                        // AP-28MAY25 Assign specific positionPercent based on action name
+                        const newActions = parsedActions.map((item, index) => {
+                            const positionPercent = item.name === 'Cancel' ? 3 :
+                                item.name === 'Save' ? 14 : (10 + index * 10);
+                            return {
+                                ...item,
+                                positionPercent: positionPercent,
+                                width: 100,
+                                textColor: "#ffffff",
+                                borderRadius: 6,
+                                id: index + 1
+                            };
+                        });
+                        // AP-28MAY25 Replace the old action string with the newly formatted array
+                        this.bookletJSON.questionbook.action = newActions;
+                    }
+                    catch (e) {
+                        console.error("Error parsing action JSON string:", e);
+                    }
+                }
+                this.initializeForm();
             }
             else {
-                obj['fldType'] = 'Text';
+                this.formBuilderService.newBook();
             }
         }
-        if (this.selectedElement?.type === 'Table') {
-            this.selectedElement['fieldsMeta'] = typeof this.selectedElement?.fieldsMeta === 'object' ? JSON.stringify(this.selectedElement?.fieldsMeta) : this.selectedElement['fieldsMeta'] || [];
-        }
-        this.updateElement(this.selectedElement);
     }
-    getDataByPath(path) {
-        if (this.selectedElement?.type === 'Table') {
-            this.selectedElement['fieldsMeta'] = typeof this.selectedElement?.fieldsMeta === 'object' ? this.selectedElement?.fieldsMeta : JSON.parse(this.selectedElement['fieldsMeta'] || []);
+    // AP-08APR25 Template is selected, update form elements and emit template mode
+    onTemplateSelected(event) {
+        this.formBuilderService.clearElements();
+        event.elements.forEach(el => this.formBuilderService.addElement(el));
+        // Emit template mode to parent
+        this.templateMode.emit(true);
+    }
+    initializeForm() {
+        if (!this.bookletJSON || !this.bookletJSON.bookQuestionsMap) {
+            console.warn("Invalid bookletJSON structure");
+            return;
         }
-        return path.split('.').reduce((obj, key) => obj?.[key], this.selectedElement);
+        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();
     }
-    // SKS25MAR25 image edit functions
-    flipHorizontal() {
-        this.transform = {
-            ...this.transform,
-            flipH: !this.transform.flipH
-        };
+    // Add this method to handle element selection
+    selectElement(index) {
+        this.selectedFieldIndex = index; // element is selected
+        this.formBuilderService.setSelectedElement(index);
+        this.book = this.formBuilderService.getBook();
+        //const element = this.formElements[index];
+        // this.elementButtonClicked.emit(element.type);  
     }
-    flipVertical() {
-        this.transform = {
-            ...this.transform,
-            flipV: !this.transform.flipV
-        };
+    //selectedIndex: number | null = null;
+    selectedFieldIndex = null; // element is cleared
+    selectHeading(event) {
+        this.formBuilderService.selectHeading(event); //AP-10MAR25 Updates the selected heading in the service  
+        this.book = this.formBuilderService.getBook(); //AP-10MAR25 Retrieves the updated book/form data 
     }
-    resetImage() {
-        this.canvasRotation = 0;
-        this.cropper = undefined;
-        this.transform = {
-            translateUnit: 'px',
-            scale: 1,
-            rotate: 0,
-            flipH: false,
-            flipV: false,
-            translateH: 0,
-            translateV: 0
-        };
+    // AP-17APR25 generateUiId 
+    generateUiId() {
+        return this.formBuilderService.addElementWithId();
     }
-    zoomOut() {
-        this.transform = {
-            ...this.transform,
-            scale: this.transform.scale - .1
-        };
+    addElement(type) {
+        const unique_id = this.generateUiId();
+        this.currentType = type;
+        if (this.selectedElement?.type === 'Table' && this.addTable) {
+            this.isSelectTablePopup = true;
+        }
+        else {
+            const newElement = {
+                action: null,
+                id: unique_id,
+                type,
+                name: null,
+                questionText: null,
+                question: null,
+                helpText: null,
+                errorMessage: null,
+                isReadOnly: false,
+                isHidden: false,
+                required: false,
+                referenceField: null,
+                additionalRichContent: null,
+                groupName: null,
+                isDateBackward: false,
+                title: null,
+                subTitle: null,
+                size: 12,
+                isDateForward: false,
+                isOptional: false,
+                isTitle: false,
+                nextQuestion: null,
+                allowedFileExtensions: null,
+                questionNumber: this.formBuilderService.getElements().length + 1,
+                order: this.formElements.length + 1,
+                questionBookId: this.bookletId,
+                fieldsMeta: [],
+                trackingId: null,
+                recordId: null,
+                qbReference: null,
+                qbReferenceQuestions: null,
+                primaryKey: false,
+                style: {
+                    labelClass: null,
+                    labelStyle: null,
+                    labelValueStyle: null,
+                    inputClass: null,
+                    inputStyle: null,
+                    showLabel: true,
+                    bookStyle: null,
+                    direction: 'ltr',
+                    questionStyle: null,
+                },
+                subText: this.getDefaultSubText(),
+                imageData: null,
+                boolean: false,
+                options: type === 'Dropdown' || type === 'Radio' || type === 'Checkbox' ? [] : null,
+                imageSize: type === 'Image' ? { width: 150, height: 150 } : null,
+                tableConfig: type === 'Table' ? {
+                    isNosIndicator: true,
+                    addInlineRecord: true,
+                    isPagination: true,
+                    actionButton: true,
+                    isDeleteRow: true,
+                    isEditRow: true,
+                    searchBar: true,
+                    isButtons: true,
+                    itemsPerPage: 10,
+                } : null,
+            };
+            this.formBuilderService.addElement(newElement);
+            this.formElements = this.formBuilderService.getElements();
+            // SKS19MAR25 fieldsmeta check
+            this.formElements = this.formElements.map(ele => {
+                if (ele.type === 'Table') {
+                    ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
+                        ? ele.fieldsMeta
+                        : JSON.stringify(ele.fieldsMeta || []);
+                }
+                return ele;
+            });
+            this.addTable = true;
+        }
     }
-    zoomIn() {
-        this.transform = {
-            ...this.transform,
-            scale: this.transform.scale + .1
+    // AP-07MAY25 - Added to handle default subText
+    getDefaultSubText() {
+        const defaultData = {
+            endpoint: null,
+            variable: null,
+            field: null,
+            defaultField: null,
+            sourceQuestionId: null,
+            valueField: null,
+            labelField: null,
+            isDependentField: false,
+            dependentValue: null,
+            queryField: null,
+            queryValue: null,
+            queryValueReference: null,
+            uniqueKey: null,
         };
+        const isEmpty = Object.values(defaultData).every(val => val === null || val === false);
+        return isEmpty ? null : defaultData;
     }
-    rotateLeft() {
-        this.loading = true;
-        setTimeout(() => {
-            this.canvasRotation--;
-            this.flipAfterRotate();
+    // Remove an element by index
+    removeElement(field, index) {
+        this.formBuilderService.removeElementComponent(field.id);
+        this.formElements = this.formBuilderService.getElements();
+        // SKS19MAR25 fieldsmeta check
+        this.formElements = this.formElements.map(ele => {
+            if (ele.type === 'Table') {
+                ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
+                    ? ele.fieldsMeta
+                    : JSON.stringify(ele.fieldsMeta || []);
+            }
+            return ele;
         });
     }
-    rotateRight() {
-        this.loading = true;
-        setTimeout(() => {
-            this.canvasRotation++;
-            this.flipAfterRotate();
+    onDragStart(event, index) {
+        this.draggedIndex = index;
+        event.dataTransfer?.setData('text/plain', index.toString());
+    }
+    // Allow dropping by preventing default
+    onDragOver(event, index) {
+        event.preventDefault();
+    }
+    // Handle drop event
+    onDrop(event, dropIndex) {
+        event.preventDefault();
+        if (this.draggedIndex === null || this.draggedIndex === dropIndex)
+            return;
+        const draggedItem = this.formElements[this.draggedIndex];
+        // Remove dragged item from old position and insert it in new position
+        this.formElements.splice(this.draggedIndex, 1);
+        this.formElements.splice(dropIndex, 0, draggedItem);
+        //AP-28MAR25 Update questionNumber dynamically based on new order
+        this.formElements.forEach((element, index) => {
+            element.questionNumber = index + 1;
         });
+        // Reset dragged index
+        this.draggedIndex = null;
+        // Notify service about the update
+        this.formBuilderService.updateElementsOrder(this.formElements);
     }
-    moveLeft() {
-        this.transform = {
-            ...this.transform,
-            translateH: this.transform.translateH - 1
-        };
+    toggleBoolean(field) {
+        field.boolean = !field.boolean;
     }
-    moveRight() {
-        this.transform = {
-            ...this.transform,
-            translateH: this.transform.translateH + 1
+    getFontStyles(field) {
+        const styles = {
+            'font-family': field.font || 'Helvetica Neue',
+            'font-weight': field.fontWeight || '400',
+            'font-size': field.fontSize || '14px',
+            'width': field.size ? `${(field.size / 12) * 100}%` : '100%',
+            'text-align': field.textAlign || 'left',
+            'border-radius': '5px',
+            'border-width': field.lineWidth ? `${field.lineWidth}px` : '1px',
+            // 'border-style': field.lineStyle?.toLowerCase() || 'solid',
+            'color': field.fontColor || '#000000',
+            // 'border-color': field.color || '#EFF8FF', 
+            'margin-top': field.paddingTop ? `${field.paddingTop}px` : '0px',
+            'margin-bottom': field.paddingBottom ? `${field.paddingBottom}px` : '10px'
         };
+        return styles;
     }
-    moveDown() {
-        this.transform = {
-            ...this.transform,
-            translateV: this.transform.translateV + 1
+    getLineStyles(field) {
+        const styles = {
+            'font-family': field.font || 'Helvetica Neue',
+            'font-weight': field.fontWeight || '400',
+            'font-size': field.fontSize || '14px',
+            'width': field.size ? `${(field.size / 12) * 100}%` : '100%',
+            'text-align': field.textAlign || 'left',
+            'border-radius': '5px',
+            'border-width': field.lineWidth ? `${field.lineWidth}px` : '1px',
+            'border-style': field.lineStyle?.toLowerCase() || 'solid',
+            'color': field.fontColor || '#000000',
+            //'border-color': field.color || '#EFF8FF', 
+            'margin-top': field.paddingTop ? `${field.paddingTop}px` : '0px',
+            'margin-bottom': field.paddingBottom ? `${field.paddingBottom}px` : '10px'
         };
+        return styles;
     }
-    moveUp() {
-        this.transform = {
-            ...this.transform,
-            translateV: this.transform.translateV - 1
-        };
+    // SKS13MAR25 table popup conformation based element add
+    onClose() {
+        this.isSelectTablePopup = false;
+        this.addTable = false;
+        this.addElement(this.currentType);
     }
-    flipAfterRotate() {
-        const flippedH = this.transform.flipH;
-        const flippedV = this.transform.flipV;
-        this.transform = {
-            ...this.transform,
-            flipH: flippedV,
-            flipV: flippedH,
-            translateH: 0,
-            translateV: 0
+    // SKS13MAR25 column element add inside a table
+    addOnTable() {
+        this.addTable = true;
+        this.isSelectTablePopup = false;
+        const elements = [...this.formBuilderService.getElements()];
+        // Find the element and update its columns
+        const index = elements.findIndex(el => el.id === this.selectedElement.id);
+        const rowNum = this.formElements[index].columns ? this.formElements[index].columns?.length : 0;
+        const unique_id = this.generateUiId();
+        const tableElement = {
+            label: `HEADER LABEL ${rowNum}`,
+            fieldName: `FIELD NAME${rowNum}`,
+            type: this.currentType,
+            id: unique_id
         };
-    }
-    async imageCropped(event) {
-        try {
-            const base64 = await this.convertBlobToBase64(event.objectUrl);
-            this.selectedElement.imageData = base64;
-            await this.formBuilderService.elementUpdate(this.selectedElementIndex, this.selectedElement);
-            // console.log('CROPPED', event);
-        }
-        catch (error) {
-            console.error("Error in imageCropped:", error);
-        }
-    }
-    cropperReady(sourceImageDimensions) {
-        // console.log('Cropper ready', sourceImageDimensions);
-        this.loading = false;
-    }
-    // SKS25MAR25 blob to base 64 converter
-    convertBlobToBase64(objectUrl) {
-        return fetch(objectUrl)
-            .then(response => response.blob())
-            .then(blob => {
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(blob);
-                reader.onloadend = () => resolve(reader.result);
-                reader.onerror = error => reject(error);
-            });
+        this.formBuilderService.addTableElement(tableElement, this.selectedFieldIndex);
+        this.formElements = this.formBuilderService.getElements();
+        // SKS19MAR25 fieldsmeta checking
+        this.formElements = this.formElements.map(ele => {
+            if (ele.type === 'Table') {
+                ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
+                    ? ele.fieldsMeta
+                    : JSON.stringify(ele.fieldsMeta || []);
+            }
+            return ele;
         });
+        // this.addTableData(unique_id, fieldName)
     }
-    // SKS28MAR25 qb book update in book element
-    childEventCapture(event) {
-        this.selectedElement.qbReference = event.valueObj?.name;
-        this.selectedElement.qbReferenceQuestions = event.valueObj?.jsonBody;
-        this.formBuilderService.elementUpdate(this.selectedElementIndex, this.selectedElement);
-    }
-    // SKS28MAR25 book search dropdown emit
-    linkToggleDropdown(event) {
-        event.stopPropagation();
-        this.isLinkDropdownOpen = !this.isLinkDropdownOpen;
-    }
-    // SKS28MAR25 book search dropdown close
-    onClickOutside(event) {
-        if (this.dropdown && !this.dropdown.nativeElement.contains(event.target)) {
-            this.isLinkDropdownOpen = false;
-        }
+    addTableData(fieldId, fieldName) {
+        // this.formBuilderService.addTablefieldData(tableElement);
     }
-    // AP-28MAR25 When drag starts, store the index
-    onDragStart(event, id) {
-        this.draggedId = id;
-        event.dataTransfer.effectAllowed = "move";
+    columnSelected(event) {
+        // console.log(event)
+        // SKS19MAR25 table column update
+        this.formBuilderService.setSelectedTableElement(this.selectedFieldIndex, event);
     }
-    // AP-28MAR25 Prevent default behavior to allow drop
-    onDragOver(event) {
-        event.preventDefault();
+    removeColumn(event) {
+        // console.log(event)
+        this.formBuilderService.removeSelectedTableElement(this.selectedFieldIndex, event);
     }
-    // AP-28MAR25 Swap the dragged item with the dropped position
-    onDrop(event, key) {
-        event.preventDefault();
-        const targetId = event.target.closest(".option-items")?.getAttribute("data-id");
-        if (this.draggedId && targetId && this.draggedId !== targetId) {
-            const options = this.selectedElement[key];
-            [options[this.draggedId], options[targetId]] = [options[targetId], options[this.draggedId]];
-            // Find the indexes of the dragged and target options
-            const draggedIndex = options.findIndex(option => option.id === this.draggedId);
-            const targetIndex = options.findIndex(option => option.id === targetId);
-            // Swap the items
-            if (draggedIndex !== -1 && targetIndex !== -1) {
-                [options[draggedIndex], options[targetIndex]] = [options[targetIndex], options[draggedIndex]];
+    // SKS25MAR25 image add
+    async fileChangeEvent(index, event) {
+        const file = event.target.files[0];
+        if (file) {
+            try {
+                const imageData = await this.readFileAsDataURL(file);
+                this.formElements[index].imageData = imageData;
+                this.formElements[index].orgImageData = imageData;
+                // Initialize logo size if not already set
+                if (!this.formElements[index].imageSize) {
+                    this.formElements[index].imageSize = { width: 150, height: 150 };
+                }
+                await this.formBuilderService.elementUpdate(index, this.formElements[index]);
+            }
+            catch (error) {
+                console.error("Error reading file:", error);
             }
         }
-        this.draggedId = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1.HttpClient }, { token: FormBuilderService }, { token: TemplateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, isStandalone: true, selector: "app-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      Attributes\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      Property\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      Appearance\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!-- AP-06MAR25 Select element type show -->\n    <div *ngIf=\"getProperties()\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'Image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search book specific for book element -->\n      <div *ngIf=\"selectedElement?.type === 'Book'\">\n        <label class=\"text-sm\">Search Book</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <lib-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n            (searchValueChange)=\"childEventCapture($event)\">\n          </lib-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>Endpoint:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>Variable:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>Field:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>Default Field:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- help text -->\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n            selectedElement.helpText }}</div>\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">Select file category</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n          </div>\n\n          <!--AP-11JUN25 - Show this section only if the property key is 'primaryKey' -->\n          <div *ngIf=\"prop.key === 'primaryKey'\">\n            <input type=\"checkbox\" [checked]=\"getValueByPath('primaryKey')\" [disabled]=\"!getValueByPath('primaryKey') && isAnotherIdSelected()\" (change)=\"onToggleChange('primaryKey', $event)\"/>\n            <span class=\"toggle-label\" style=\"padding-left: 10px;\">primaryKey</span>\n          </div>\n\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{ prop.label }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!-- AP 25FEB25 - Change key size -->\n          <div *ngIf=\"prop.key === 'size'\">\n            <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n              class=\"size-input\" />\n          </div>\n\n          <!-- AP-19MAR25 Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n        \n         <!-- AP 23MAY25 - Action Button -->\n        <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n          <div class=\"form-header\">\n            <label class=\"form-label\">{{ prop.label }}</label>\n            <button (click)=\"addNewButton()\" class=\"add-button\">+ Add Button</button>\n          </div>\n        \n          <div *ngFor=\"let btn of book?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n            <div class=\"form-group\">\n              <label>Button Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event)\" placeholder=\"Enter button name\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Event Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Alt</label>\n              <input type=\"text\" [(ngModel)]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Endpoint</label>\n              <input type=\"text\" [(ngModel)]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Method</label>\n              <select [(ngModel)]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n                <option [value]=\"'GET'\">GET</option>\n                <option [value]=\"'POST'\">POST</option>\n                <option [value]=\"'PUT'\">PUT</option>\n                <option [value]=\"'DELETE'\">DELETE</option>\n              </select>\n            </div>\n        \n            <!-- AP 23MAY25 - Action Style Fields -->\n            <div class=\"form-group\">\n              <label>Background Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Border Radius</label>\n              <input type=\"range\" min=\"0\" max=\"50\" [(ngModel)]=\"btn.borderRadius\" \n                     (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n              <span>{{ btn.borderRadius }}px</span>\n            </div>            \n            \n            <div class=\"form-group\">\n              <label>Button Width (px)</label>\n              <input type=\"number\" [(ngModel)]=\"btn.width\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Text Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.textColor\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Position (%)</label>\n              <input type=\"range\" min=\"0\" max=\"100\" [(ngModel)]=\"btn.positionPercent\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n              <span>{{ btn.positionPercent }}%</span>\n            </div>\n            <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 Remove</button>\n          </div>\n        </div>\n        \n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!-- AP-06MAR25 Show elements ID  -->\n    <div *ngIf=\"getProperties()\">\n      <label>Label Id</label>\n      <div\n        style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n                  (change)=\"onRequiredChange($event.target.checked)\" />\n                Required\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n                  (change)=\"onToggleChange('isReadOnly', $event)\" />\n                Read Only\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n                  (change)=\"onToggleChange('isHidden', $event)\" />\n                Is Hide\n              </label>\n            </div>\n          </div>\n\n          <!-- AP 28FEB25 - handled options with UUID -->\n          <div\n            *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n\n      <!-- SKS21MAR25 Move Style Outside the Loop -->\n      <!-- Style Toggle -->\n      <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n        <div class=\"head-elements\">Style</div>\n        <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n          alt=\"Toggle Arrow\" class=\"arrow-icon\">\n      </div>\n\n      <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n        <div class=\"form-group\">\n          <div *ngFor=\"let key of getStyleKeys()\">\n            <label>{{ key }}</label>\n            <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n              (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <!-- Font Selection -->\n          <div *ngIf=\"prop.key === 'font'\">\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n              (change)=\"setValueByPath('font', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n          <!-- Font Size Selection -->\n          <div *ngIf=\"prop.key === 'fontSize'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n          <!-- Font Weight Selection -->\n          <div *ngIf=\"prop.key === 'fontWeight'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n\n          <div class=\"flex-container\">\n            <!-- Dropdown Box -->\n            <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n              <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n                <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                  {{ option }}\n                </option>\n              </select>\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n                (change)=\"setValueByPath('fontColor', $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n                (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n          </div>\n          \n          <!-- AP-17APR25 Button for Duplicate Field  -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n  <button type=\"button\"\n    class=\"toggle-button\"\n    (click)=\"duplicateField(selectedElement)\">\n    Add Duplicate\n  </button>\n</div>\n\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n  <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{margin-left:10px;cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.add-button{padding:8px 14px;background-color:#0954c5;color:#fff;border:none;border-radius:8px;cursor:pointer}.add-button:hover{background-color:#0954c5}.button-config-card{background-color:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.form-group{margin-bottom:12px}.form-group label{display:block;font-weight:600;margin-bottom:6px}.form-group input,.form-group select{padding:8px 10px;border:1px solid #ccc;border-radius:6px}.remove-button{background-color:#e74c3c;color:#fff;border:none;padding:6px 12px;margin-top:10px;border-radius:6px;cursor:pointer}.remove-button:hover{background-color:#c0392b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: SearchBoxComponent, selector: "lib-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "filterName"], outputs: ["searchValueChange"] }] });
+    readFileAsDataURL(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = (error) => reject(error);
+            reader.readAsDataURL(file);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], 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" }, 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</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</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 class=\"field-container\"\n      style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n      (click)=\"selectHeading('Header')\">\n      <div class=\"label-container\" style=\"padding: 10px;\">\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    </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\">{{\n                  field.questionText ? field.questionText : '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'\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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</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.isRequired\"></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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\">{{ field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\"> {{ field.questionText ? field.questionText : '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'\"\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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'\"\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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 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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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 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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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=\"checkbox-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 : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : 'Label' }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable  isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                (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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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...\" [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>These element want to add a table</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">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 img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-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}.element.disabled{opacity:.5;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "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"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-properties', standalone: true, imports: [CommonModule, FormsModule, ImageCropperComponent, SearchBoxComponent], template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      Attributes\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      Property\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      Appearance\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!-- AP-06MAR25 Select element type show -->\n    <div *ngIf=\"getProperties()\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'Image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search book specific for book element -->\n      <div *ngIf=\"selectedElement?.type === 'Book'\">\n        <label class=\"text-sm\">Search Book</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <lib-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n            (searchValueChange)=\"childEventCapture($event)\">\n          </lib-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>Endpoint:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>Variable:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>Field:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>Default Field:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- help text -->\n          <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n            selectedElement.helpText }}</div>\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">Select file category</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n          </div>\n\n          <!--AP-11JUN25 - Show this section only if the property key is 'primaryKey' -->\n          <div *ngIf=\"prop.key === 'primaryKey'\">\n            <input type=\"checkbox\" [checked]=\"getValueByPath('primaryKey')\" [disabled]=\"!getValueByPath('primaryKey') && isAnotherIdSelected()\" (change)=\"onToggleChange('primaryKey', $event)\"/>\n            <span class=\"toggle-label\" style=\"padding-left: 10px;\">primaryKey</span>\n          </div>\n\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{ prop.label }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!-- AP 25FEB25 - Change key size -->\n          <div *ngIf=\"prop.key === 'size'\">\n            <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n              class=\"size-input\" />\n          </div>\n\n          <!-- AP-19MAR25 Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n        \n         <!-- AP 23MAY25 - Action Button -->\n        <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n          <div class=\"form-header\">\n            <label class=\"form-label\">{{ prop.label }}</label>\n            <button (click)=\"addNewButton()\" class=\"add-button\">+ Add Button</button>\n          </div>\n        \n          <div *ngFor=\"let btn of book?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n            <div class=\"form-group\">\n              <label>Button Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event)\" placeholder=\"Enter button name\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Event Name</label>\n              <input type=\"text\" [(ngModel)]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Alt</label>\n              <input type=\"text\" [(ngModel)]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Endpoint</label>\n              <input type=\"text\" [(ngModel)]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Method</label>\n              <select [(ngModel)]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n                <option [value]=\"'GET'\">GET</option>\n                <option [value]=\"'POST'\">POST</option>\n                <option [value]=\"'PUT'\">PUT</option>\n                <option [value]=\"'DELETE'\">DELETE</option>\n              </select>\n            </div>\n        \n            <!-- AP 23MAY25 - Action Style Fields -->\n            <div class=\"form-group\">\n              <label>Background Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n            </div>\n        \n            <div class=\"form-group\">\n              <label>Border Radius</label>\n              <input type=\"range\" min=\"0\" max=\"50\" [(ngModel)]=\"btn.borderRadius\" \n                     (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n              <span>{{ btn.borderRadius }}px</span>\n            </div>            \n            \n            <div class=\"form-group\">\n              <label>Button Width (px)</label>\n              <input type=\"number\" [(ngModel)]=\"btn.width\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Text Color</label>\n              <input type=\"color\" [(ngModel)]=\"btn.textColor\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n            </div>\n            \n            <div class=\"form-group\">\n              <label>Position (%)</label>\n              <input type=\"range\" min=\"0\" max=\"100\" [(ngModel)]=\"btn.positionPercent\"\n                     (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n              <span>{{ btn.positionPercent }}%</span>\n            </div>\n            <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 Remove</button>\n          </div>\n        </div>\n        \n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!-- AP-06MAR25 Show elements ID  -->\n    <div *ngIf=\"getProperties()\">\n      <label>Label Id</label>\n      <div\n        style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n                  (change)=\"onRequiredChange($event.target.checked)\" />\n                Required\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n                  (change)=\"onToggleChange('isReadOnly', $event)\" />\n                Read Only\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n                  (change)=\"onToggleChange('isHidden', $event)\" />\n                Is Hide\n              </label>\n            </div>\n          </div>\n\n          <!-- AP 28FEB25 - handled options with UUID -->\n          <div\n            *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n\n      <!-- SKS21MAR25 Move Style Outside the Loop -->\n      <!-- Style Toggle -->\n      <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n        <div class=\"head-elements\">Style</div>\n        <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n          alt=\"Toggle Arrow\" class=\"arrow-icon\">\n      </div>\n\n      <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n        <div class=\"form-group\">\n          <div *ngFor=\"let key of getStyleKeys()\">\n            <label>{{ key }}</label>\n            <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n              (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"getProperties()\">\n      <ng-container *ngFor=\"let prop of getProperties().appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{ prop.label }}</label>\n          <!-- Font Selection -->\n          <div *ngIf=\"prop.key === 'font'\">\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n              (change)=\"setValueByPath('font', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n          <!-- Font Size Selection -->\n          <div *ngIf=\"prop.key === 'fontSize'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n          <!-- Font Weight Selection -->\n          <div *ngIf=\"prop.key === 'fontWeight'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.label }}\n              </option>\n            </select>\n          </div>\n\n          <div class=\"flex-container\">\n            <!-- Dropdown Box -->\n            <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n              <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n                <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                  {{ option }}\n                </option>\n              </select>\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n                (change)=\"setValueByPath('fontColor', $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n                (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n          </div>\n          \n          <!-- AP-17APR25 Button for Duplicate Field  -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n  <button type=\"button\"\n    class=\"toggle-button\"\n    (click)=\"duplicateField(selectedElement)\">\n    Add Duplicate\n  </button>\n</div>\n\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n  <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{margin-left:10px;cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.add-button{padding:8px 14px;background-color:#0954c5;color:#fff;border:none;border-radius:8px;cursor:pointer}.add-button:hover{background-color:#0954c5}.button-config-card{background-color:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.form-group{margin-bottom:12px}.form-group label{display:block;font-weight:600;margin-bottom:6px}.form-group input,.form-group select{padding:8px 10px;border:1px solid #ccc;border-radius:6px}.remove-button{background-color:#e74c3c;color:#fff;border:none;padding:6px 12px;margin-top:10px;border-radius:6px;cursor:pointer}.remove-button:hover{background-color:#c0392b}\n"] }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: FormBuilderService }, { type: TemplateService }], propDecorators: { formButtonHandler: [{
-                type: Output
-            }], templateSaveHandler: [{
-                type: Output
-            }], selectedElementType: [{
+            args: [{ selector: 'app-element', standalone: true, imports: [QuestionbookComponent, CommonModule, FormsModule, BookletComponent, NxtDatatable], 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</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</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 class=\"field-container\"\n      style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n      (click)=\"selectHeading('Header')\">\n      <div class=\"label-container\" style=\"padding: 10px;\">\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    </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\">{{\n                  field.questionText ? field.questionText : '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'\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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</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.isRequired\"></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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\">{{ field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\"> {{ field.questionText ? field.questionText : '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'\"\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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'\"\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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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 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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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 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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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=\"checkbox-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 : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : 'Label' }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable  isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                (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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : '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...\" [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>These element want to add a table</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">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 img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-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}.element.disabled{opacity:.5;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { bookletJSON: [{
                 type: Input
-            }], templateSelected: [{
+            }], bookletId: [{
                 type: Input
-            }], dropdown: [{
-                type: ViewChild,
-                args: ['dropdown', { static: false }]
-            }], onClickOutside: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
+            }], templateMode: [{
+                type: Output
             }] } });
 
 // AP-29JAN25 
@@ -22098,6 +21963,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }] } });
 
+// 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,
+            NxtDatatable,
+            NxtInput,
+            QuestionnaireComponent,
+            BookletComponent,
+            QuestionbookComponent,
+            NxtButtonComponent,
+            PdfDesignerComponent,
+            FormComponent, I18nModule], exports: [NxtAppComponent,
+            QuestionnaireComponent,
+            BookletComponent,
+            NxtDatatable,
+            NxtInput,
+            NxtButtonComponent,
+            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
+        ], imports: [CommonModule, FormsModule,
+            NxtDatatable,
+            NxtInput,
+            QuestionnaireComponent,
+            BookletComponent,
+            QuestionbookComponent,
+            NxtButtonComponent,
+            PdfDesignerComponent,
+            FormComponent,
+            I18nModule.forRoot(languages)] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtAppModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NxtAppComponent,
+                        I18nComponent
+                    ],
+                    imports: [
+                        CommonModule, FormsModule,
+                        NxtDatatable,
+                        NxtInput,
+                        QuestionnaireComponent,
+                        BookletComponent,
+                        QuestionbookComponent,
+                        NxtButtonComponent,
+                        PdfDesignerComponent,
+                        FormComponent,
+                        I18nModule.forRoot(languages)
+                    ],
+                    bootstrap: [NxtAppComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    exports: [NxtAppComponent,
+                        QuestionnaireComponent,
+                        BookletComponent,
+                        NxtDatatable,
+                        NxtInput,
+                        NxtButtonComponent,
+                        PdfDesignerComponent,
+                    ],
+                    providers: [
+                        I18nService,
+                        I18nPipe,
+                        FormBuilderService, //AP 22JAN2025 Added the FormBuilderService
+                        PdfDesignerService
+                    ]
+                }]
+        }] });
+
 /*
  * Public API Surface of nxt-app
  */
@@ -22106,5 +22049,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BookletComponent, ElementComponent, EmptyQuillConfiguration, FormComponent, I18nComponent, I18nPipe, MenuComponent, NxtAppComponent, NxtAppModule, NxtAppService, NxtButtonComponent, NxtDatatable, NxtInput, PdfDesignerComponent, PdfPropertiesComponent, PropertiesComponent, QuestionbookComponent, QuestionnaireComponent, QuillConfiguration, SalesforceService };
+export { BookletComponent, FormComponent, I18nComponent, I18nPipe, NxtAppComponent, NxtAppModule, NxtAppService, NxtButtonComponent, NxtDatatable, NxtInput, PdfDesignerComponent, QuestionnaireComponent, SalesforceService };
 //# sourceMappingURL=rangertechnologies-ngnxt.mjs.map