@rangertechnologies/ngnxt 2.1.270 → 2.1.271

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -7134,8 +7134,13 @@ class NxtInput {
         }
         if (changes['value']) {
             if (this.type === 'dropdown') {
-                if (this.selectedOption.value === changes['value'].currentValue) {
-                    this.writeValue(this.selectedOption.label, 'onChange');
+                if (this.selectedOption.value) {
+                    if (this.selectedOption.value === changes['value'].currentValue) {
+                        this.writeValue(this.selectedOption.label, 'onChange');
+                    }
+                }
+                else {
+                    this.writeValue(changes['value'].currentValue, 'onChange');
                 }
             }
             else {
@@ -7971,8 +7976,8 @@ class CustomDropdownComponent {
             this.mode = changes['mode'].currentValue;
         }
         // SKS7AUG25 option translation creation
-        if (changes['selectedValue']) {
-            this.selectedValue = changes['selectedValue'].currentValue;
+        if (changes['selectedValue'] || changes['options']) {
+            this.selectedValue = !changes['selectedValue'] ? this.selectedValue : changes['selectedValue'].currentValue;
             if (Array.isArray(this.options) && this.options?.length > 0) {
                 const tempOption = [...this.options];
                 for (const opt of tempOption) {
@@ -54224,7 +54229,7 @@ class NxtDatatable {
             this.multipleFilterArray = this.multipleFilter;
         }
         // Create a temporary filtered array that excludes any column with '['
-        const tempFilterColumns = this.currentColumns?.filter(col => !col.fieldName.includes('['));
+        const tempFilterColumns = this.currentColumns?.filter(col => !col?.fieldName?.includes('['));
         if (tempFilterColumns?.length > 0) {
             const filtObjs = {};
             // SKS26MAY25 Initialize sets to collect unique values for each column
@@ -54520,7 +54525,7 @@ class NxtDatatable {
             this.multipleFilterArray = this.multipleFilter;
         }
         // Create a temporary filtered array that excludes any column with '['
-        const tempFilterColumns = this.columns?.filter(col => !col.fieldName.includes('['));
+        const tempFilterColumns = this.columns?.filter(col => !col?.fieldName?.includes('['));
         if (tempFilterColumns?.length > 0) {
             const filtObjs = {};
             // SKS26MAY25 Initialize sets to collect unique values for each column
@@ -61164,7 +61169,7 @@ const VERSION = {
     "semver": null,
     "suffix": "09440148-dirty",
     "semverString": null,
-    "version": "2.1.270"
+    "version": "2.1.271"
 };
 /* tslint:enable */
 
@@ -63108,10 +63113,6 @@ class PdfDesignerComponent {
         else {
             this.pdfDesignerService.newBook();
         }
-        // AP-12MAR25 - Added to handle bookletId
-        if (this.bookletId) {
-            localStorage.setItem('unique_id', this.bookletId);
-        }
         this.pdf = this.pdfDesignerService.getBook();
         if (!this.isPreview) {
             this.pdfDesignerService.selectedElement$.subscribe(index => {
@@ -63725,14 +63726,12 @@ class FormBuilderService {
     elementComponent = null;
     book;
     unique_id;
-    tempElem;
     formElements$ = this.formElementsSubject.asObservable();
     selectedElement$ = this.selectedElementSubject.asObservable();
     selectHeaderSubject$ = this.selectHeaderSubject.asObservable();
     actionSubject$ = this.actionSubject.asObservable();
     currentElement;
     selectTableColumn;
-    // book: { bookQuestionsMap: { unique_id: { subQuestions: any[]; }; }; };
     constructor(http) {
         this.http = http;
         // Load saved elements from localStorage
@@ -63886,6 +63885,7 @@ class FormBuilderService {
     }
     // AP 26FEB25 - clear the form elements 
     clearElements() {
+        this.book = {};
         this.formElements = [];
         this.formElementsSubject.next([...this.formElements]);
     }
@@ -64007,7 +64007,6 @@ class FormBuilderService {
             }
             this.formElements[index] = updatedElement;
             this.formElementsSubject.next([...this.formElements]);
-            // localStorage.setItem('formElements', JSON.stringify(this.formElements));
         }
         if (this.book?.bookQuestionsMap[Object.keys(this.book.bookQuestionsMap)[0]]?.subQuestions)
             this.book.bookQuestionsMap[Object.keys(this.book.bookQuestionsMap)[0]].subQuestions = this.formElements;
@@ -64071,6 +64070,9 @@ class FormBuilderService {
     getBook() {
         return this.book;
     }
+    getBookId() {
+        return this.unique_id;
+    }
     updateBook(book) {
         this.book = book;
         const updatedSubQuestions = book.bookQuestionsMap[this.unique_id]?.subQuestions ?? [];
@@ -64167,16 +64169,15 @@ class FormBuilderService {
     // Remove an element by ID
     // Save elements to localStorage and update the subject
     removeElementComponent(id) {
-        this.tempElem = [];
+        let tempElem = [];
         this.selectedElementSubject.next(null);
         this.currentElement = {};
         this.formElements.forEach((element) => {
             if (element.id !== id) {
-                this.tempElem.push(element);
+                tempElem.push(element);
             }
         });
-        this.formElements = this.tempElem;
-        // localStorage.setItem('formElements', JSON.stringify(this.formElements));
+        this.formElements = tempElem;
         if (this.book?.bookQuestionsMap[Object.keys(this.book.bookQuestionsMap)[0]]?.subQuestions)
             this.book.bookQuestionsMap[Object.keys(this.book.bookQuestionsMap)[0]].subQuestions = this.formElements;
         this.formElementsSubject.next([...this.formElements]);
@@ -65331,7 +65332,6 @@ class ElementComponent {
     formBuilderService;
     translationService;
     bookletJSON;
-    bookletId;
     langOption;
     languageCode = 'en';
     templateMode = new EventEmitter();
@@ -65397,16 +65397,12 @@ class ElementComponent {
                 this.formElements = elements.map((field) => ({ ...field }));
             }, 0);
         });
-        if (this.bookletJSON && this.bookletJSON !== "") {
+        if (this.bookletJSON && this.bookletJSON !== "" && Object.keys(this.bookletJSON).length > 0 && this.bookletJSON.bookQuestionsMap) {
             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();
@@ -65437,7 +65433,7 @@ class ElementComponent {
     // AP - 26FEB25 - Added ngOnChanges to handle changes in bookletJSON
     ngOnChanges(changes) {
         if (changes["bookletJSON"] && changes["bookletJSON"].currentValue) {
-            if (this.bookletJSON && this.bookletJSON !== "") {
+            if (this.bookletJSON && this.bookletJSON !== "" && Object.keys(this.bookletJSON).length > 0 && this.bookletJSON.bookQuestionsMap) {
                 // AP-28MAY25 - Check and transform `action` if it's in Existing format
                 if (this.bookletJSON.questionbook &&
                     this.bookletJSON.questionbook.action &&
@@ -65470,6 +65466,8 @@ class ElementComponent {
                 this.initializeForm();
             }
             else {
+                this.formElements = [];
+                this.formBuilderService.clearElements();
                 this.formBuilderService.newBook();
             }
         }
@@ -65544,7 +65542,7 @@ class ElementComponent {
                 allowedFileExtensions: null,
                 questionNumber: this.formBuilderService.getElements().length + 1,
                 order: this.formElements.length + 1,
-                questionBookId: this.bookletId,
+                questionBookId: this.formBuilderService.getBookId(),
                 fieldsMeta: [],
                 trackingId: null,
                 recordId: null,
@@ -65765,7 +65763,7 @@ class ElementComponent {
         this.translationService.setFormBuilderLanguage(this.languageCode);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ElementComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FormBuilderService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <app-custom-dropdown [options]=\"langOption\" [selectedValue]=\"languageCode\" [from]=\"'normalDropDown'\"\n        [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n        style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </app-custom-dropdown>\n    </div>\n\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- TextBox -->\n      <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n      <!-- MSM-09JUL25 Icon-selectir Element -->\n      <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"choose-icon-placeholder\">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.fontColor || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF',\n          'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n        }\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n                nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date &\n                  Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n      <!-- SKS7AUG25 month -->\n      <div *ngIf=\"field.type === 'month'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.fontColor || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" \n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{field.questionText ? field.questionText : ('SELECT_MONTH' | nxtCustomTranslate : 'Select Month')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"month\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n                  nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n            'font-family': field?.font || 'Helvetica Neue',\n            'font-weight': field?.fontWeight || '400',\n            'font-size': field?.fontSize || '14px',\n            'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n            'text-align': field?.textAlign || 'left',\n            'border-radius': '5px',\n            'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n            'color': field?.fontColor || '#000000',\n            'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n            'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n            'border-color': field?.color || '#EFF8FF'\n          }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{  option.label  }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{  option.label  }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n                (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:10px;cursor:grab}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:15px;height:15px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <app-custom-dropdown [options]=\"langOption\" [selectedValue]=\"languageCode\" [from]=\"'normalDropDown'\"\n        [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n        style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </app-custom-dropdown>\n    </div>\n\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- TextBox -->\n      <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n      <!-- MSM-09JUL25 Icon-selectir Element -->\n      <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"choose-icon-placeholder\">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.fontColor || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF',\n          'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n        }\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n                nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date &\n                  Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n      <!-- SKS7AUG25 month -->\n      <div *ngIf=\"field.type === 'month'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.fontColor || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" \n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{field.questionText ? field.questionText : ('SELECT_MONTH' | nxtCustomTranslate : 'Select Month')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"month\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n                  nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n            'font-family': field?.font || 'Helvetica Neue',\n            'font-weight': field?.fontWeight || '400',\n            'font-size': field?.fontSize || '14px',\n            'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n            'text-align': field?.textAlign || 'left',\n            'border-radius': '5px',\n            'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n            'color': field?.fontColor || '#000000',\n            'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n            'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n            'border-color': field?.color || '#EFF8FF'\n          }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{  option.label  }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{  option.label  }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n                (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:10px;cursor:grab}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:15px;height:15px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ElementComponent, decorators: [{
             type: Component,
@@ -65779,8 +65777,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     ], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <app-custom-dropdown [options]=\"langOption\" [selectedValue]=\"languageCode\" [from]=\"'normalDropDown'\"\n        [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n        style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </app-custom-dropdown>\n    </div>\n\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- TextBox -->\n      <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n      <!-- MSM-09JUL25 Icon-selectir Element -->\n      <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"choose-icon-placeholder\">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.fontColor || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF',\n          'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n        }\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n                nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date &\n                  Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n      <!-- SKS7AUG25 month -->\n      <div *ngIf=\"field.type === 'month'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.fontColor || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" \n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{field.questionText ? field.questionText : ('SELECT_MONTH' | nxtCustomTranslate : 'Select Month')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"month\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n                  nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n            'font-family': field?.font || 'Helvetica Neue',\n            'font-weight': field?.fontWeight || '400',\n            'font-size': field?.fontSize || '14px',\n            'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n            'text-align': field?.textAlign || 'left',\n            'border-radius': '5px',\n            'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n            'color': field?.fontColor || '#000000',\n            'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n            'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n            'border-color': field?.color || '#EFF8FF'\n          }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{  option.label  }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{  option.label  }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n                (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:10px;cursor:grab}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:15px;height:15px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FormBuilderService }, { type: TranslationService }], propDecorators: { bookletJSON: [{
                 type: Input
-            }], bookletId: [{
-                type: Input
             }], langOption: [{
                 type: Input
             }], languageCode: [{
@@ -65792,10 +65788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 // AP-29JAN25 
 class FormComponent {
     // Input data for app-element
-    // bookletJson: any = {}; // Replace with your actual JSON object
-    // bookletId: string = '123'; // Replace with your actual booklet ID
     bookletJSON;
-    bookletId;
     langOption;
     formButtonHandler = new EventEmitter();
     templateSaveHandler = new EventEmitter();
@@ -65815,15 +65808,13 @@ class FormComponent {
         this.templateSaveHandler.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormComponent, isStandalone: true, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId", langOption: "langOption" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n     <!--AP-08APR25 Passes a boolean to indicate if a template is selected -->\n    <app-element \n    [langOption]=\"langOption\"\n    [bookletJSON]=\"bookletJSON\" \n    [bookletId]=\"bookletId\"\n    (templateMode)=\"onTemplateModeChange($event)\">\n  </app-element>\n   <!-- app-properties Component -->\n  <!-- AP-08APR25 Emits an event when the template mode -->\n  <app-properties \n  (formButtonHandler)=\"formButtonHandlerClick($event)\"\n  (templateSaveHandler)=\"saveTemplate($event)\"\n  [templateSelected]=\"isTemplateSelected\">\n </app-properties>\n  \n  ", styles: [".form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}app-element{width:75%}app-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}\n"], dependencies: [{ kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["templateSelected", "selectedElementType"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId", "langOption", "languageCode"], outputs: ["templateMode"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: FormComponent, isStandalone: true, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", langOption: "langOption" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n     <!--AP-08APR25 Passes a boolean to indicate if a template is selected -->\n  <app-element \n    [langOption]=\"langOption\"\n    [bookletJSON]=\"bookletJSON\" \n    (templateMode)=\"onTemplateModeChange($event)\">\n  </app-element>\n   <!-- app-properties Component -->\n  <!-- AP-08APR25 Emits an event when the template mode -->\n  <app-properties \n  (formButtonHandler)=\"formButtonHandlerClick($event)\"\n  (templateSaveHandler)=\"saveTemplate($event)\"\n  [templateSelected]=\"isTemplateSelected\">\n </app-properties>\n  \n  ", styles: [".form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}app-element{width:75%}app-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}\n"], dependencies: [{ kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["templateSelected", "selectedElementType"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "langOption", "languageCode"], outputs: ["templateMode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-builder', standalone: true, imports: [PropertiesComponent, CommonModule, ElementComponent], template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n     <!--AP-08APR25 Passes a boolean to indicate if a template is selected -->\n    <app-element \n    [langOption]=\"langOption\"\n    [bookletJSON]=\"bookletJSON\" \n    [bookletId]=\"bookletId\"\n    (templateMode)=\"onTemplateModeChange($event)\">\n  </app-element>\n   <!-- app-properties Component -->\n  <!-- AP-08APR25 Emits an event when the template mode -->\n  <app-properties \n  (formButtonHandler)=\"formButtonHandlerClick($event)\"\n  (templateSaveHandler)=\"saveTemplate($event)\"\n  [templateSelected]=\"isTemplateSelected\">\n </app-properties>\n  \n  ", styles: [".form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}app-element{width:75%}app-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}\n"] }]
+            args: [{ selector: 'app-form-builder', standalone: true, imports: [PropertiesComponent, CommonModule, ElementComponent], template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n     <!--AP-08APR25 Passes a boolean to indicate if a template is selected -->\n  <app-element \n    [langOption]=\"langOption\"\n    [bookletJSON]=\"bookletJSON\" \n    (templateMode)=\"onTemplateModeChange($event)\">\n  </app-element>\n   <!-- app-properties Component -->\n  <!-- AP-08APR25 Emits an event when the template mode -->\n  <app-properties \n  (formButtonHandler)=\"formButtonHandlerClick($event)\"\n  (templateSaveHandler)=\"saveTemplate($event)\"\n  [templateSelected]=\"isTemplateSelected\">\n </app-properties>\n  \n  ", styles: [".form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}app-element{width:75%}app-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}\n"] }]
         }], propDecorators: { bookletJSON: [{
                 type: Input
-            }], bookletId: [{
-                type: Input
             }], langOption: [{
                 type: Input
             }], formButtonHandler: [{