@rangertechnologies/ngnxt 2.1.277 → 2.1.278

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -50346,7 +50346,7 @@ class NxtDatatable {
             });
             parsedMeta = updatedMeta;
             this.columns = updatedMeta;
-            this.currentColumns = this.currentColumns = updatedMeta.filter((ele) => ele?.subText?.isDependentField !== true);
+            this.currentColumns = updatedMeta.filter((ele) => ele?.subText?.isDependentField !== true);
             if (this.tableConfig) {
                 const config = this.tableConfig;
                 this.isNosIndicator = config?.isNosIndicator !== false;
@@ -50373,7 +50373,7 @@ class NxtDatatable {
                 type: fldType,
                 ...rest
             }));
-            this.summaryRowsOrginal = this.summaryRows;
+            this.summaryRowsOrginal = this.summaryRows.filter(sumcol => sumcol?.subText?.isDependentField !== true);
         }
         // Ensure `this.data` is an array
         if (!this.data || !Array.isArray(this.data)) {
@@ -50617,7 +50617,7 @@ class NxtDatatable {
                 type: fldType,
                 ...rest
             }));
-            this.summaryRowsOrginal = this.summaryRows;
+            this.summaryRowsOrginal = this.summaryRows.filter(sumcol => sumcol?.subText?.isDependentField !== true);
             if (parsedMeta && parsedMeta.length > 0) {
                 parsedMeta.forEach((col) => {
                     if (col.subText?.sourceQuestionId) {
@@ -50739,6 +50739,19 @@ class NxtDatatable {
                                         return ele?.subText?.dependentValue !== changeValue.valueObj;
                                     });
                                 }
+                                if (this.summaryRows && this.summaryRows?.length > 0 && this.currentColumns.length > 0) {
+                                    this.isFullTableSummaryRow = this.summaryRows[0].type === 'fullRow' || this.summaryRows[0].type === 'fullrow' ? true : false;
+                                    this.isSummaryColumn = this.currentColumns.some(element => element.fieldName === this.summaryRows[0].column);
+                                    if (this.isSummaryColumn && !this.isFullTableSummaryRow) {
+                                        const index = this.currentColumns.findIndex(col => col.fieldName === this.summaryRows[0].column);
+                                        if (index !== -1) {
+                                            this.isSummaryStartColumn = this.currentColumns.slice(0, index - 1);
+                                            this.isSummaryStartColumn = this.isSummaryStartColumn.filter(col => !col.summaryRow);
+                                            this.isSummaryEndColumn = this.currentColumns.slice(index + 1);
+                                            this.isSummaryEndColumn = this.isSummaryEndColumn.filter(col => !col.summaryRow);
+                                        }
+                                    }
+                                }
                                 this.cdRef.markForCheck();
                             }
                         }
@@ -57492,7 +57505,7 @@ const VERSION = {
     "semver": null,
     "suffix": "09440148-dirty",
     "semverString": null,
-    "version": "2.1.277"
+    "version": "2.1.278"
 };
 /* tslint:enable */
 
@@ -60366,11 +60379,11 @@ class PdfDesignerComponent {
         this.selectedCurrency = event.code;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PdfDesignerComponent, deps: [{ token: ChangeService }, { token: CountryService }, { token: PdfDesignerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview", from: "from" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>    \n    <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n      <div class=\"form-preview\">\n        <!-- AP-10MAR25 Heading -->\n        <div *ngIf=\"!isPreview\" class=\"field-container\"\n          style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n          (click)=\"selectHeading('Header')\">\n          <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n            <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n              <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n              <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n            </div>\n            <div class=\"action-buttons\">\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n          <!-- AP-19MAR25 Line Element -->\n          <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n            (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div *ngIf=\"!isPreview \" class=\"line-element\">\n              <div></div>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                'font-family': field?.style?.font || 'Helvetica Neue',\n                'font-weight': field?.style?.fontWeight || '400',\n                'font-size': (field?.style?.fontSize || 14) + 'px',\n                'width': (field?.width || 100) + '%',\n                'text-align': field.textAlign || 'left',\n                'border-radius': '5px',\n                \n                'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                'color': field?.style?.color || '#000000',\n                'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n              }\" />\n          </div>\n  \n          <!--SKS25MAR25 Image Upload Element -->\n          <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n            (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" \n            (mouseenter)=\"isImageHover = true;\"\n            (mouseleave)=\"isImageHover = false;\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div>\n                    <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                      <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                        <div style=\"display: flex; justify-content: end;\">\n                          <svg (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                              fill=\"#6C757D\" />\n                          </svg>\n                          <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                          </svg>\n                        </div>\n                        <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n                      </div>\n  \n                      <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                        <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                          <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                          <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                        </label>\n                        <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                          style=\"display: none;\" />\n                      </div>\n                    </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Space Element -->\n          <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div *ngIf=\"!isPreview \" class=\"field-content\">\n                <div class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Date -->\n          <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' ||  field?.type === 'boolean' || field?.type === 'text'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <!-- AP-04JUN25 - replace custom date picker -->\n                <nxt-input [type]=\"field.type === 'boolean' ? 'checkbox' : field?.type === 'text' ? 'textarea' : field.type\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n                  [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                  [currency] = 'selectedCurrency' [label]=\"field?.questionText\" (click)=\"field?.type === 'text' ? openTextSettings(field, $event) : ''\"\n                  [inputWeight]=\"\" [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                  [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                  inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                  [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n                </nxt-input>\n              </div>\n            </div>\n            <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n              [ngStyle]=\"{\n                position: 'absolute',\n                background: '#fff',\n                border: '1px solid #ccc',\n                padding: '6px 10px',\n                'border-radius': '4px',\n                'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                'z-index': '65535',\n                display: 'flex',\n                'align-items': 'center',\n                gap: '8px'\n              }\">\n          \n              <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                <option [value]=\"12\">12pt</option>\n                <option [value]=\"14\">14pt</option>\n                <option [value]=\"16\">16pt</option>\n                <option [value]=\"18\">18pt</option>\n                <option [value]=\"24\">24pt</option>\n              </select>\n  \n              <label title=\"Text Color\" class=\"color-label\">\n              <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n              <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n              </label>\n  \n              <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n            \n              <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n  \n  \n            \n              <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n              </button>\n          \n              <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n            </div>\n          </div>\n  \n          <!-- Pdf -->\n          <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg> \n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n                <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"form-preview\" style=\"padding: unset !important;\">\n                  <ng-container *ngFor=\"let pdfField of field?.pdfReferenceQuestions[field?.pdfReference]; let j = index\">\n                    <!-- AP-19MAR25 Line Element -->\n                    <div *ngIf=\"pdfField?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: pdfField.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n                      (click)=\"selectElement(i,j); $event.stopPropagation();\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, j)\" (dragover)=\"onDragOver($event, j)\"\n                      (drop)=\"onDrop($event, j)\">\n                      <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                          'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                          'font-weight': pdfField?.style?.fontWeight || '400',\n                          'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                          'width': (pdfField?.width || 100) + '%',\n                          'text-align': pdfField.textAlign || 'left',\n                          'border-radius': '5px',\n                          \n                          'border-style': (pdfField.lineStyle?.toLowerCase() || 'solid'),\n                          'color': pdfField?.style?.color || '#000000',\n                          'margin-top': (pdfField?.style?.paddingTop || 0) + 'px',\n                          'margin-bottom': (pdfField?.style?.paddingBottom ?? 10) + 'px'\n                        }\" />\n                    </div>\n\n                    <!--SKS25MAR25 Image Upload Element -->\n                    <div *ngIf=\"pdfField?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" \n                      (mouseenter)=\"isImageHover = true;\"\n                      (mouseleave)=\"isImageHover = false;\">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <div>\n                              <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': pdfField?.style?.alignment || '' }\">\n                                <div class=\"logo-preview\" *ngIf=\"pdfField.imageData\">\n                                  <div style=\"display: flex; justify-content: end;\">\n                                    <svg (click)=\"onImageEdit(pdfField)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                      <path\n                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                        fill=\"#6C757D\" />\n                                    </svg>\n                                    <svg (click)=\"onImageDelete(pdfField)\" width=\"16\" height=\"16\"\n                                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                      <path\n                                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                    </svg>\n                                  </div>\n                                  <img [src]=\"pdfField.imageData\" [style.width.px]=\"pdfField.imageSize?.width || 100\" [style.height.px]=\"pdfField.imageSize?.height || 100\" />\n                                </div>\n\n                                <div *ngIf=\"!pdfField.imageData\" class=\"logo-upload-placeholder\">\n                                  <label for=\"logo-upload-{{j}}\" 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-{{j}}\" accept=\"image/*\" (change)=\"fileChangeEvent(pdfField, $event)\"\n                                    style=\"display: none;\" />\n                                </div>\n                              </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Space Element -->\n                    <div *ngIf=\"pdfField?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div *ngIf=\"!isPreview \" class=\"field-content\">\n                          <div class=\"label-container\">\n                            <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(pdfField, j)\" class=\"delete-icon\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Date -->\n                    <div *ngIf=\"pdfField?.type === 'date' || pdfField?.type === 'currency' ||  pdfField?.type === 'boolean' || pdfField?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <!-- AP-04JUN25 - replace custom date picker -->\n                          <nxt-input [type]=\"pdfField.type === 'boolean' ? 'checkbox' : pdfField?.type === 'text' ? 'textarea' : pdfField.type\" [mode]=\"'edit'\" [value]=\"pdfField.value\" [question]=\"pdfField\" [labelFont]=\"\"\n                            [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                            [currency] = 'selectedCurrency' [label]=\"pdfField?.questionText\" (click)=\"pdfField?.type === 'text' ? openTextSettings(pdfField, $event) : ''\"\n                            [inputWeight]=\"\"  [showLabel]=\"pdfField?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                            [placeholder]=\"pdfField.question ? pdfField.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                            inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                            [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, pdfField)\">\n                          </nxt-input>\n                        </div>\n                      </div>\n                      <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                      <div *ngIf=\"showTextSettings && isPreview && selectedColumn === pdfField\" class=\"text-settings-toolbar\"\n                        [ngStyle]=\"{\n                          position: 'absolute',\n                          background: '#fff',\n                          border: '1px solid #ccc',\n                          padding: '6px 10px',\n                          'border-radius': '4px',\n                          'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                          'z-index': '65535',\n                          display: 'flex',\n                          'align-items': 'center',\n                          gap: '8px'\n                        }\">\n                    \n                        <!-- Font Size -->\n                        <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                          <option [value]=\"12\">12pt</option>\n                          <option [value]=\"14\">14pt</option>\n                          <option [value]=\"16\">16pt</option>\n                          <option [value]=\"18\">18pt</option>\n                          <option [value]=\"24\">24pt</option>\n                        </select>\n\n                        <!-- Text Color -->\n                        <label title=\"Text Color\" class=\"color-label\">\n                        <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                        <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                        </label>\n\n                        <!-- Bold -->\n                        <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n                      \n                        <!-- Italic -->\n                        <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n                        <!-- Underline -->\n                        <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n                        <!-- Align Left -->\n                        <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n                        </button>\n                      \n                        <!-- Align Center -->\n                        <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n                        </button>\n                      \n                        <!-- Align Right -->\n                        <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n                        </button>\n                    \n                        <!-- Close -->\n                        <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                      </div>  \n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!--  Table  -->\n          <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <div class=\"nxt-table-container\">\n                  <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n                    [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                    tableWidth=\"auto\" isEditable=true (columnSelected)=\"selectElement(i);columnSelected($event)\"\n                    [data]=\"field.value?.data\"\n                    (valueChange)=\"onQuestionChange($event, field)\"\n                    (removeColumn)=removeColumn($event)>\n                  </nxt-datatable>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div *ngIf=\"isPreview\" style=\"width: 25%; margin-bottom:10px\">\n        <div style=\"padding: 8px;\">\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n          <div class=\"color-picker\">\n            <label>Change Color</label>\n            <div class=\"colors\">\n              <!-- Default colors -->\n              <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n                   [style.background]=\"color\"\n                   (click)=\"selectColor(color)\">\n              </div>\n          \n              <!-- Last box: custom color picker with eyedropper -->\n              <label class=\"color-swatch custom-picker\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n                <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n              </label>\n            </div>\n          </div> \n           <!-- SKS22JUL25 Dropdown -->\n           <app-custom-dropdown  \n              [options]=\"currencyOptions\"\n              [id]=\"bookletId\" [selectedValue]=\"selectedCurrency\"\n              [question]=\"{'color': '#ffff', 'inputBgColor' : '#585653'}\"\n              placeholder=\"\" [from]=\"'normalDropDown'\"\n              [apiMeta] = \"{'field': 'name','isObject': true}\"\n              (valueChange)=\"currencyChange($event.value.valueObj)\">\n          </app-custom-dropdown>    \n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n        <div style=\"height: 200px;\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n        </div>\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}\n"], dependencies: [{ 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview", from: "from" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>    \n    <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n      <div class=\"form-preview\">\n        <!-- AP-10MAR25 Heading -->\n        <div *ngIf=\"!isPreview\" class=\"field-container\"\n          style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n          (click)=\"selectHeading('Header')\">\n          <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n            <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n              <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n              <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n            </div>\n            <div class=\"action-buttons\">\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n          <!-- AP-19MAR25 Line Element -->\n          <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n            (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div *ngIf=\"!isPreview \" class=\"line-element\">\n              <div></div>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                'font-family': field?.style?.font || 'Helvetica Neue',\n                'font-weight': field?.style?.fontWeight || '400',\n                'font-size': (field?.style?.fontSize || 14) + 'px',\n                'width': (field?.width || 100) + '%',\n                'text-align': field.textAlign || 'left',\n                'border-radius': '5px',\n                \n                'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                'color': field?.style?.color || '#000000',\n                'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n              }\" />\n          </div>\n  \n          <!--SKS25MAR25 Image Upload Element -->\n          <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n            (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" \n            (mouseenter)=\"isImageHover = true;\"\n            (mouseleave)=\"isImageHover = false;\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div>\n                    <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                      <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                        <div style=\"display: flex; justify-content: end;\">\n                          <svg (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                              fill=\"#6C757D\" />\n                          </svg>\n                          <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                          </svg>\n                        </div>\n                        <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n                      </div>\n  \n                      <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                        <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                          <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                          <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                        </label>\n                        <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                          style=\"display: none;\" />\n                      </div>\n                    </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Space Element -->\n          <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div *ngIf=\"!isPreview \" class=\"field-content\">\n                <div class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Date -->\n          <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' ||  field?.type === 'boolean' || field?.type === 'text'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <!-- AP-04JUN25 - replace custom date picker -->\n                <nxt-input [type]=\"field.type === 'boolean' ? 'checkbox' : field?.type === 'text' ? 'textarea' : field.type\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n                  [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                  [currency] = 'selectedCurrency' [label]=\"field?.questionText\" (click)=\"field?.type === 'text' ? openTextSettings(field, $event) : ''\"\n                  [inputWeight]=\"\" [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                  [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                  inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                  [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n                </nxt-input>\n              </div>\n            </div>\n            <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n              [ngStyle]=\"{\n                position: 'absolute',\n                background: '#fff',\n                border: '1px solid #ccc',\n                padding: '6px 10px',\n                'border-radius': '4px',\n                'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                'z-index': '65535',\n                display: 'flex',\n                'align-items': 'center',\n                gap: '8px'\n              }\">\n          \n              <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                <option [value]=\"12\">12pt</option>\n                <option [value]=\"14\">14pt</option>\n                <option [value]=\"16\">16pt</option>\n                <option [value]=\"18\">18pt</option>\n                <option [value]=\"24\">24pt</option>\n              </select>\n  \n              <label title=\"Text Color\" class=\"color-label\">\n              <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n              <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n              </label>\n  \n              <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n            \n              <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n  \n  \n            \n              <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n              </button>\n          \n              <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n            </div>\n          </div>\n  \n          <!-- Pdf -->\n          <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg> \n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n                <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"form-preview\" style=\"padding: unset !important;\">\n                  <ng-container *ngFor=\"let pdfField of field?.pdfReferenceQuestions[field?.pdfReference]; let j = index\">\n                    <!-- AP-19MAR25 Line Element -->\n                    <div *ngIf=\"pdfField?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: pdfField.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n                      (click)=\"selectElement(i,j); $event.stopPropagation();\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, j)\" (dragover)=\"onDragOver($event, j)\"\n                      (drop)=\"onDrop($event, j)\">\n                      <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                          'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                          'font-weight': pdfField?.style?.fontWeight || '400',\n                          'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                          'width': (pdfField?.width || 100) + '%',\n                          'text-align': pdfField.textAlign || 'left',\n                          'border-radius': '5px',\n                          \n                          'border-style': (pdfField.lineStyle?.toLowerCase() || 'solid'),\n                          'color': pdfField?.style?.color || '#000000',\n                          'margin-top': (pdfField?.style?.paddingTop || 0) + 'px',\n                          'margin-bottom': (pdfField?.style?.paddingBottom ?? 10) + 'px'\n                        }\" />\n                    </div>\n\n                    <!--SKS25MAR25 Image Upload Element -->\n                    <div *ngIf=\"pdfField?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" \n                      (mouseenter)=\"isImageHover = true;\"\n                      (mouseleave)=\"isImageHover = false;\">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <div>\n                              <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': pdfField?.style?.alignment || '' }\">\n                                <div class=\"logo-preview\" *ngIf=\"pdfField.imageData\">\n                                  <div style=\"display: flex; justify-content: end;\">\n                                    <svg (click)=\"onImageEdit(pdfField)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                      <path\n                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                        fill=\"#6C757D\" />\n                                    </svg>\n                                    <svg (click)=\"onImageDelete(pdfField)\" width=\"16\" height=\"16\"\n                                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                      <path\n                                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                    </svg>\n                                  </div>\n                                  <img [src]=\"pdfField.imageData\" [style.width.px]=\"pdfField.imageSize?.width || 100\" [style.height.px]=\"pdfField.imageSize?.height || 100\" />\n                                </div>\n\n                                <div *ngIf=\"!pdfField.imageData\" class=\"logo-upload-placeholder\">\n                                  <label for=\"logo-upload-{{j}}\" 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-{{j}}\" accept=\"image/*\" (change)=\"fileChangeEvent(pdfField, $event)\"\n                                    style=\"display: none;\" />\n                                </div>\n                              </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Space Element -->\n                    <div *ngIf=\"pdfField?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div *ngIf=\"!isPreview \" class=\"field-content\">\n                          <div class=\"label-container\">\n                            <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(pdfField, j)\" class=\"delete-icon\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Date -->\n                    <div *ngIf=\"pdfField?.type === 'date' || pdfField?.type === 'currency' ||  pdfField?.type === 'boolean' || pdfField?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <!-- AP-04JUN25 - replace custom date picker -->\n                          <nxt-input [type]=\"pdfField.type === 'boolean' ? 'checkbox' : pdfField?.type === 'text' ? 'textarea' : pdfField.type\" [mode]=\"'edit'\" [value]=\"pdfField.value\" [question]=\"pdfField\" [labelFont]=\"\"\n                            [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                            [currency] = 'selectedCurrency' [label]=\"pdfField?.questionText\" (click)=\"pdfField?.type === 'text' ? openTextSettings(pdfField, $event) : ''\"\n                            [inputWeight]=\"\"  [showLabel]=\"pdfField?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                            [placeholder]=\"pdfField.question ? pdfField.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                            inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                            [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, pdfField)\">\n                          </nxt-input>\n                        </div>\n                      </div>\n                      <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                      <div *ngIf=\"showTextSettings && isPreview && selectedColumn === pdfField\" class=\"text-settings-toolbar\"\n                        [ngStyle]=\"{\n                          position: 'absolute',\n                          background: '#fff',\n                          border: '1px solid #ccc',\n                          padding: '6px 10px',\n                          'border-radius': '4px',\n                          'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                          'z-index': '65535',\n                          display: 'flex',\n                          'align-items': 'center',\n                          gap: '8px'\n                        }\">\n                    \n                        <!-- Font Size -->\n                        <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                          <option [value]=\"12\">12pt</option>\n                          <option [value]=\"14\">14pt</option>\n                          <option [value]=\"16\">16pt</option>\n                          <option [value]=\"18\">18pt</option>\n                          <option [value]=\"24\">24pt</option>\n                        </select>\n\n                        <!-- Text Color -->\n                        <label title=\"Text Color\" class=\"color-label\">\n                        <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                        <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                        </label>\n\n                        <!-- Bold -->\n                        <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n                      \n                        <!-- Italic -->\n                        <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n                        <!-- Underline -->\n                        <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n                        <!-- Align Left -->\n                        <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n                        </button>\n                      \n                        <!-- Align Center -->\n                        <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n                        </button>\n                      \n                        <!-- Align Right -->\n                        <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n                        </button>\n                    \n                        <!-- Close -->\n                        <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                      </div>  \n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!--  Table  -->\n          <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <div class=\"nxt-table-container\">\n                  <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n                    [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                    tableWidth=\"auto\" isEditable=true (columnSelected)=\"selectElement(i);columnSelected($event)\"\n                    [data]=\"field.value?.data\"\n                    (valueChange)=\"onQuestionChange($event, field)\"\n                    (removeColumn)=removeColumn($event)>\n                  </nxt-datatable>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div *ngIf=\"isPreview\" style=\"width: 25%; margin-bottom:10px\">\n        <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n          <div class=\"color-picker\">\n            <label>Change Color</label>\n            <div class=\"colors\">\n              <!-- Default colors -->\n              <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n                   [style.background]=\"color\"\n                   (click)=\"selectColor(color)\">\n              </div>\n          \n              <!-- Last box: custom color picker with eyedropper -->\n              <label class=\"color-swatch custom-picker\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n                <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n              </label>\n            </div>\n          </div> \n           <!-- SKS22JUL25 Dropdown -->\n           <app-custom-dropdown  \n              [options]=\"currencyOptions\"\n              [id]=\"bookletId\" [selectedValue]=\"selectedCurrency\"\n              [question]=\"{'color': '#ffff', 'inputBgColor' : '#585653'}\"\n              placeholder=\"\" [from]=\"'normalDropDown'\"\n              [apiMeta] = \"{'field': 'name','isObject': true}\"\n              (valueChange)=\"currencyChange($event.value.valueObj)\">\n          </app-custom-dropdown>    \n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n        <div style=\"height: 200px;\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n        </div>\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}\n"], dependencies: [{ 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isListViews", "id", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons", "isButtonLoading"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PdfDesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pdf-designer', standalone: true, imports: [CustomDropdownComponent, CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, NxtInput, NxtCustomTranslatePipe], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>    \n    <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n      <div class=\"form-preview\">\n        <!-- AP-10MAR25 Heading -->\n        <div *ngIf=\"!isPreview\" class=\"field-container\"\n          style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n          (click)=\"selectHeading('Header')\">\n          <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n            <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n              <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n              <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n            </div>\n            <div class=\"action-buttons\">\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n          <!-- AP-19MAR25 Line Element -->\n          <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n            (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div *ngIf=\"!isPreview \" class=\"line-element\">\n              <div></div>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                'font-family': field?.style?.font || 'Helvetica Neue',\n                'font-weight': field?.style?.fontWeight || '400',\n                'font-size': (field?.style?.fontSize || 14) + 'px',\n                'width': (field?.width || 100) + '%',\n                'text-align': field.textAlign || 'left',\n                'border-radius': '5px',\n                \n                'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                'color': field?.style?.color || '#000000',\n                'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n              }\" />\n          </div>\n  \n          <!--SKS25MAR25 Image Upload Element -->\n          <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n            (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" \n            (mouseenter)=\"isImageHover = true;\"\n            (mouseleave)=\"isImageHover = false;\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div>\n                    <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                      <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                        <div style=\"display: flex; justify-content: end;\">\n                          <svg (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                              fill=\"#6C757D\" />\n                          </svg>\n                          <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                          </svg>\n                        </div>\n                        <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n                      </div>\n  \n                      <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                        <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                          <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                          <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                        </label>\n                        <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                          style=\"display: none;\" />\n                      </div>\n                    </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Space Element -->\n          <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div *ngIf=\"!isPreview \" class=\"field-content\">\n                <div class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Date -->\n          <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' ||  field?.type === 'boolean' || field?.type === 'text'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <!-- AP-04JUN25 - replace custom date picker -->\n                <nxt-input [type]=\"field.type === 'boolean' ? 'checkbox' : field?.type === 'text' ? 'textarea' : field.type\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n                  [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                  [currency] = 'selectedCurrency' [label]=\"field?.questionText\" (click)=\"field?.type === 'text' ? openTextSettings(field, $event) : ''\"\n                  [inputWeight]=\"\" [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                  [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                  inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                  [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n                </nxt-input>\n              </div>\n            </div>\n            <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n              [ngStyle]=\"{\n                position: 'absolute',\n                background: '#fff',\n                border: '1px solid #ccc',\n                padding: '6px 10px',\n                'border-radius': '4px',\n                'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                'z-index': '65535',\n                display: 'flex',\n                'align-items': 'center',\n                gap: '8px'\n              }\">\n          \n              <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                <option [value]=\"12\">12pt</option>\n                <option [value]=\"14\">14pt</option>\n                <option [value]=\"16\">16pt</option>\n                <option [value]=\"18\">18pt</option>\n                <option [value]=\"24\">24pt</option>\n              </select>\n  \n              <label title=\"Text Color\" class=\"color-label\">\n              <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n              <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n              </label>\n  \n              <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n            \n              <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n  \n  \n            \n              <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n              </button>\n          \n              <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n            </div>\n          </div>\n  \n          <!-- Pdf -->\n          <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg> \n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n                <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"form-preview\" style=\"padding: unset !important;\">\n                  <ng-container *ngFor=\"let pdfField of field?.pdfReferenceQuestions[field?.pdfReference]; let j = index\">\n                    <!-- AP-19MAR25 Line Element -->\n                    <div *ngIf=\"pdfField?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: pdfField.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n                      (click)=\"selectElement(i,j); $event.stopPropagation();\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, j)\" (dragover)=\"onDragOver($event, j)\"\n                      (drop)=\"onDrop($event, j)\">\n                      <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                          'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                          'font-weight': pdfField?.style?.fontWeight || '400',\n                          'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                          'width': (pdfField?.width || 100) + '%',\n                          'text-align': pdfField.textAlign || 'left',\n                          'border-radius': '5px',\n                          \n                          'border-style': (pdfField.lineStyle?.toLowerCase() || 'solid'),\n                          'color': pdfField?.style?.color || '#000000',\n                          'margin-top': (pdfField?.style?.paddingTop || 0) + 'px',\n                          'margin-bottom': (pdfField?.style?.paddingBottom ?? 10) + 'px'\n                        }\" />\n                    </div>\n\n                    <!--SKS25MAR25 Image Upload Element -->\n                    <div *ngIf=\"pdfField?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" \n                      (mouseenter)=\"isImageHover = true;\"\n                      (mouseleave)=\"isImageHover = false;\">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <div>\n                              <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': pdfField?.style?.alignment || '' }\">\n                                <div class=\"logo-preview\" *ngIf=\"pdfField.imageData\">\n                                  <div style=\"display: flex; justify-content: end;\">\n                                    <svg (click)=\"onImageEdit(pdfField)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                      <path\n                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                        fill=\"#6C757D\" />\n                                    </svg>\n                                    <svg (click)=\"onImageDelete(pdfField)\" width=\"16\" height=\"16\"\n                                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                      <path\n                                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                    </svg>\n                                  </div>\n                                  <img [src]=\"pdfField.imageData\" [style.width.px]=\"pdfField.imageSize?.width || 100\" [style.height.px]=\"pdfField.imageSize?.height || 100\" />\n                                </div>\n\n                                <div *ngIf=\"!pdfField.imageData\" class=\"logo-upload-placeholder\">\n                                  <label for=\"logo-upload-{{j}}\" 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-{{j}}\" accept=\"image/*\" (change)=\"fileChangeEvent(pdfField, $event)\"\n                                    style=\"display: none;\" />\n                                </div>\n                              </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Space Element -->\n                    <div *ngIf=\"pdfField?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div *ngIf=\"!isPreview \" class=\"field-content\">\n                          <div class=\"label-container\">\n                            <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(pdfField, j)\" class=\"delete-icon\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Date -->\n                    <div *ngIf=\"pdfField?.type === 'date' || pdfField?.type === 'currency' ||  pdfField?.type === 'boolean' || pdfField?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <!-- AP-04JUN25 - replace custom date picker -->\n                          <nxt-input [type]=\"pdfField.type === 'boolean' ? 'checkbox' : pdfField?.type === 'text' ? 'textarea' : pdfField.type\" [mode]=\"'edit'\" [value]=\"pdfField.value\" [question]=\"pdfField\" [labelFont]=\"\"\n                            [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                            [currency] = 'selectedCurrency' [label]=\"pdfField?.questionText\" (click)=\"pdfField?.type === 'text' ? openTextSettings(pdfField, $event) : ''\"\n                            [inputWeight]=\"\"  [showLabel]=\"pdfField?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                            [placeholder]=\"pdfField.question ? pdfField.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                            inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                            [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, pdfField)\">\n                          </nxt-input>\n                        </div>\n                      </div>\n                      <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                      <div *ngIf=\"showTextSettings && isPreview && selectedColumn === pdfField\" class=\"text-settings-toolbar\"\n                        [ngStyle]=\"{\n                          position: 'absolute',\n                          background: '#fff',\n                          border: '1px solid #ccc',\n                          padding: '6px 10px',\n                          'border-radius': '4px',\n                          'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                          'z-index': '65535',\n                          display: 'flex',\n                          'align-items': 'center',\n                          gap: '8px'\n                        }\">\n                    \n                        <!-- Font Size -->\n                        <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                          <option [value]=\"12\">12pt</option>\n                          <option [value]=\"14\">14pt</option>\n                          <option [value]=\"16\">16pt</option>\n                          <option [value]=\"18\">18pt</option>\n                          <option [value]=\"24\">24pt</option>\n                        </select>\n\n                        <!-- Text Color -->\n                        <label title=\"Text Color\" class=\"color-label\">\n                        <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                        <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                        </label>\n\n                        <!-- Bold -->\n                        <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n                      \n                        <!-- Italic -->\n                        <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n                        <!-- Underline -->\n                        <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n                        <!-- Align Left -->\n                        <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n                        </button>\n                      \n                        <!-- Align Center -->\n                        <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n                        </button>\n                      \n                        <!-- Align Right -->\n                        <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n                        </button>\n                    \n                        <!-- Close -->\n                        <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                      </div>  \n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!--  Table  -->\n          <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <div class=\"nxt-table-container\">\n                  <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n                    [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                    tableWidth=\"auto\" isEditable=true (columnSelected)=\"selectElement(i);columnSelected($event)\"\n                    [data]=\"field.value?.data\"\n                    (valueChange)=\"onQuestionChange($event, field)\"\n                    (removeColumn)=removeColumn($event)>\n                  </nxt-datatable>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div *ngIf=\"isPreview\" style=\"width: 25%; margin-bottom:10px\">\n        <div style=\"padding: 8px;\">\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n          <div class=\"color-picker\">\n            <label>Change Color</label>\n            <div class=\"colors\">\n              <!-- Default colors -->\n              <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n                   [style.background]=\"color\"\n                   (click)=\"selectColor(color)\">\n              </div>\n          \n              <!-- Last box: custom color picker with eyedropper -->\n              <label class=\"color-swatch custom-picker\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n                <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n              </label>\n            </div>\n          </div> \n           <!-- SKS22JUL25 Dropdown -->\n           <app-custom-dropdown  \n              [options]=\"currencyOptions\"\n              [id]=\"bookletId\" [selectedValue]=\"selectedCurrency\"\n              [question]=\"{'color': '#ffff', 'inputBgColor' : '#585653'}\"\n              placeholder=\"\" [from]=\"'normalDropDown'\"\n              [apiMeta] = \"{'field': 'name','isObject': true}\"\n              (valueChange)=\"currencyChange($event.value.valueObj)\">\n          </app-custom-dropdown>    \n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n        <div style=\"height: 200px;\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n        </div>\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}\n"] }]
+            args: [{ selector: 'app-pdf-designer', standalone: true, imports: [CustomDropdownComponent, CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, NxtInput, NxtCustomTranslatePipe], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>    \n    <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n      <div class=\"form-preview\">\n        <!-- AP-10MAR25 Heading -->\n        <div *ngIf=\"!isPreview\" class=\"field-container\"\n          style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n          (click)=\"selectHeading('Header')\">\n          <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n            <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n              <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n              <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n            </div>\n            <div class=\"action-buttons\">\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n          <!-- AP-19MAR25 Line Element -->\n          <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n            (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div *ngIf=\"!isPreview \" class=\"line-element\">\n              <div></div>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                'font-family': field?.style?.font || 'Helvetica Neue',\n                'font-weight': field?.style?.fontWeight || '400',\n                'font-size': (field?.style?.fontSize || 14) + 'px',\n                'width': (field?.width || 100) + '%',\n                'text-align': field.textAlign || 'left',\n                'border-radius': '5px',\n                \n                'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                'color': field?.style?.color || '#000000',\n                'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n              }\" />\n          </div>\n  \n          <!--SKS25MAR25 Image Upload Element -->\n          <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n            (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" \n            (mouseenter)=\"isImageHover = true;\"\n            (mouseleave)=\"isImageHover = false;\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div>\n                    <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                      <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                        <div style=\"display: flex; justify-content: end;\">\n                          <svg (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                            fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                              fill=\"#6C757D\" />\n                          </svg>\n                          <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                          </svg>\n                        </div>\n                        <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n                      </div>\n  \n                      <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                        <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                          <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                          <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                        </label>\n                        <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                          style=\"display: none;\" />\n                      </div>\n                    </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Space Element -->\n          <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div *ngIf=\"!isPreview \" class=\"field-content\">\n                <div class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Date -->\n          <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' ||  field?.type === 'boolean' || field?.type === 'text'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <!-- AP-04JUN25 - replace custom date picker -->\n                <nxt-input [type]=\"field.type === 'boolean' ? 'checkbox' : field?.type === 'text' ? 'textarea' : field.type\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n                  [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                  [currency] = 'selectedCurrency' [label]=\"field?.questionText\" (click)=\"field?.type === 'text' ? openTextSettings(field, $event) : ''\"\n                  [inputWeight]=\"\" [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                  [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                  inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                  [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n                </nxt-input>\n              </div>\n            </div>\n            <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n              [ngStyle]=\"{\n                position: 'absolute',\n                background: '#fff',\n                border: '1px solid #ccc',\n                padding: '6px 10px',\n                'border-radius': '4px',\n                'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                'z-index': '65535',\n                display: 'flex',\n                'align-items': 'center',\n                gap: '8px'\n              }\">\n          \n              <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                <option [value]=\"12\">12pt</option>\n                <option [value]=\"14\">14pt</option>\n                <option [value]=\"16\">16pt</option>\n                <option [value]=\"18\">18pt</option>\n                <option [value]=\"24\">24pt</option>\n              </select>\n  \n              <label title=\"Text Color\" class=\"color-label\">\n              <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n              <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n              </label>\n  \n              <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n            \n              <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n  \n  \n            \n              <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n              </button>\n          \n              <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n            </div>\n          </div>\n  \n          <!-- Pdf -->\n          <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg> \n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n                <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"form-preview\" style=\"padding: unset !important;\">\n                  <ng-container *ngFor=\"let pdfField of field?.pdfReferenceQuestions[field?.pdfReference]; let j = index\">\n                    <!-- AP-19MAR25 Line Element -->\n                    <div *ngIf=\"pdfField?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: pdfField.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n                      (click)=\"selectElement(i,j); $event.stopPropagation();\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, j)\" (dragover)=\"onDragOver($event, j)\"\n                      (drop)=\"onDrop($event, j)\">\n                      <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                          'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                          'font-weight': pdfField?.style?.fontWeight || '400',\n                          'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                          'width': (pdfField?.width || 100) + '%',\n                          'text-align': pdfField.textAlign || 'left',\n                          'border-radius': '5px',\n                          \n                          'border-style': (pdfField.lineStyle?.toLowerCase() || 'solid'),\n                          'color': pdfField?.style?.color || '#000000',\n                          'margin-top': (pdfField?.style?.paddingTop || 0) + 'px',\n                          'margin-bottom': (pdfField?.style?.paddingBottom ?? 10) + 'px'\n                        }\" />\n                    </div>\n\n                    <!--SKS25MAR25 Image Upload Element -->\n                    <div *ngIf=\"pdfField?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" \n                      (mouseenter)=\"isImageHover = true;\"\n                      (mouseleave)=\"isImageHover = false;\">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <div>\n                              <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': pdfField?.style?.alignment || '' }\">\n                                <div class=\"logo-preview\" *ngIf=\"pdfField.imageData\">\n                                  <div style=\"display: flex; justify-content: end;\">\n                                    <svg (click)=\"onImageEdit(pdfField)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                      <path\n                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                        fill=\"#6C757D\" />\n                                    </svg>\n                                    <svg (click)=\"onImageDelete(pdfField)\" width=\"16\" height=\"16\"\n                                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                      <path\n                                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                    </svg>\n                                  </div>\n                                  <img [src]=\"pdfField.imageData\" [style.width.px]=\"pdfField.imageSize?.width || 100\" [style.height.px]=\"pdfField.imageSize?.height || 100\" />\n                                </div>\n\n                                <div *ngIf=\"!pdfField.imageData\" class=\"logo-upload-placeholder\">\n                                  <label for=\"logo-upload-{{j}}\" 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-{{j}}\" accept=\"image/*\" (change)=\"fileChangeEvent(pdfField, $event)\"\n                                    style=\"display: none;\" />\n                                </div>\n                              </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Space Element -->\n                    <div *ngIf=\"pdfField?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div *ngIf=\"!isPreview \" class=\"field-content\">\n                          <div class=\"label-container\">\n                            <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(pdfField, j)\" class=\"delete-icon\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Date -->\n                    <div *ngIf=\"pdfField?.type === 'date' || pdfField?.type === 'currency' ||  pdfField?.type === 'boolean' || pdfField?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 14) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'align-items': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.fontStyle,\n                        'font-weight': pdfField?.style?.fontWeight || '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <!-- AP-04JUN25 - replace custom date picker -->\n                          <nxt-input [type]=\"pdfField.type === 'boolean' ? 'checkbox' : pdfField?.type === 'text' ? 'textarea' : pdfField.type\" [mode]=\"'edit'\" [value]=\"pdfField.value\" [question]=\"pdfField\" [labelFont]=\"\"\n                            [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                            [currency] = 'selectedCurrency' [label]=\"pdfField?.questionText\" (click)=\"pdfField?.type === 'text' ? openTextSettings(pdfField, $event) : ''\"\n                            [inputWeight]=\"\"  [showLabel]=\"pdfField?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                            [placeholder]=\"pdfField.question ? pdfField.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                            inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                            [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, pdfField)\">\n                          </nxt-input>\n                        </div>\n                      </div>\n                      <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                      <div *ngIf=\"showTextSettings && isPreview && selectedColumn === pdfField\" class=\"text-settings-toolbar\"\n                        [ngStyle]=\"{\n                          position: 'absolute',\n                          background: '#fff',\n                          border: '1px solid #ccc',\n                          padding: '6px 10px',\n                          'border-radius': '4px',\n                          'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                          'z-index': '65535',\n                          display: 'flex',\n                          'align-items': 'center',\n                          gap: '8px'\n                        }\">\n                    \n                        <!-- Font Size -->\n                        <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                          <option [value]=\"12\">12pt</option>\n                          <option [value]=\"14\">14pt</option>\n                          <option [value]=\"16\">16pt</option>\n                          <option [value]=\"18\">18pt</option>\n                          <option [value]=\"24\">24pt</option>\n                        </select>\n\n                        <!-- Text Color -->\n                        <label title=\"Text Color\" class=\"color-label\">\n                        <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                        <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                        </label>\n\n                        <!-- Bold -->\n                        <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n                      \n                        <!-- Italic -->\n                        <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n                        <!-- Underline -->\n                        <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n                        <!-- Align Left -->\n                        <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n                        </button>\n                      \n                        <!-- Align Center -->\n                        <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n                        </button>\n                      \n                        <!-- Align Right -->\n                        <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n                        </button>\n                    \n                        <!-- Close -->\n                        <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                      </div>  \n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!--  Table  -->\n          <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 14) + 'px',\n              'width': (field?.width || 100) + '%',\n              'align-items': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.fontStyle,\n              'font-weight': field?.style?.fontWeight || '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <div class=\"nxt-table-container\">\n                  <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n                    [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                    tableWidth=\"auto\" isEditable=true (columnSelected)=\"selectElement(i);columnSelected($event)\"\n                    [data]=\"field.value?.data\"\n                    (valueChange)=\"onQuestionChange($event, field)\"\n                    (removeColumn)=removeColumn($event)>\n                  </nxt-datatable>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div *ngIf=\"isPreview\" style=\"width: 25%; margin-bottom:10px\">\n        <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n          <div class=\"color-picker\">\n            <label>Change Color</label>\n            <div class=\"colors\">\n              <!-- Default colors -->\n              <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n                   [style.background]=\"color\"\n                   (click)=\"selectColor(color)\">\n              </div>\n          \n              <!-- Last box: custom color picker with eyedropper -->\n              <label class=\"color-swatch custom-picker\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n                <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n              </label>\n            </div>\n          </div> \n           <!-- SKS22JUL25 Dropdown -->\n           <app-custom-dropdown  \n              [options]=\"currencyOptions\"\n              [id]=\"bookletId\" [selectedValue]=\"selectedCurrency\"\n              [question]=\"{'color': '#ffff', 'inputBgColor' : '#585653'}\"\n              placeholder=\"\" [from]=\"'normalDropDown'\"\n              [apiMeta] = \"{'field': 'name','isObject': true}\"\n              (valueChange)=\"currencyChange($event.value.valueObj)\">\n          </app-custom-dropdown>    \n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n        <div style=\"height: 200px;\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n        </div>\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: ChangeService }, { type: CountryService }, { type: PdfDesignerService }], propDecorators: { textareas: [{
                 type: ViewChildren,
                 args: ['autoTextarea']