@rangertechnologies/ngnxt 2.1.274 → 2.1.275

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -61190,7 +61190,7 @@ const VERSION = {
     "semver": null,
     "suffix": "09440148-dirty",
     "semverString": null,
-    "version": "2.1.274"
+    "version": "2.1.275"
 };
 /* tslint:enable */
 
@@ -61394,20 +61394,9 @@ class PdfDesignerService {
     }
     downloadElement() {
         this.pdfElements.forEach(element => {
-            //AP-02JUN25 - Set a default value for 'date' type elements if no value is provided
-            // const defaultDate = 'date'
-            // if (element.type === '' && !element.value) {
-            //    element.value = defaultDate;11
-            // }
-            if (element.type === 'text' || 'input') {
-                // element.value = (element.question || element.value || '').replace(/\\n/g, '\n');
-            }
             if (element.subText && typeof element.subText === 'object') {
                 element.subText = JSON.stringify(element.subText);
             }
-            // if (element.pdfReferenceQuestions) {
-            //   delete element.pdfReferenceQuestions;
-            // }
         });
         this.pdf[this.unique_id] = this.pdfElements;
         this.pdf['pdfJson'] = this.convertToPdfLayout(this.pdf);
@@ -61480,7 +61469,7 @@ class PdfDesignerService {
                     // Table data
                     item?.value?.data?.forEach(tableData => {
                         body.push(mainColumns.map(col => ({
-                            text: tableData[col.apiName], "nowrap": false
+                            text: tableData[col.apiName], "nowrap": false, style: col.uniqueIdentifier
                         })));
                     });
                     // Summary rows
@@ -61534,6 +61523,14 @@ class PdfDesignerService {
         result.content = processItems(items);
         let styleJson = {};
         for (const item of items) {
+            if (item.type === "Table") {
+                if (Array.isArray(item.fieldsMeta)) {
+                    for (let field of item.fieldsMeta) {
+                        styleJson[field.uniqueIdentifier] = field.style;
+                    }
+                }
+            }
+            item.style.margin = item.style.margin.map(Number);
             styleJson[item.styleClass] = item.style;
         }
         result['styles'] = styleJson;
@@ -62002,15 +61999,18 @@ class PdfPropertiesComponent {
             ],
             appearance: [
                 {
-                    label: 'Select Font', labelPath: 'SELECTFONT', type: 'select', key: 'font', placeholder: 'Left',
-                    options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
+                    label: 'Select Font', labelPath: 'SELECTFONT', type: 'select', key: 'style.font', placeholder: 'Left',
+                    options: [{ value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
+                        { value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
+                        { value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
+                        { value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }]
                 },
-                { label: 'Font Color', labelPath: 'FONTCOLOR', type: 'color', key: 'fontColor', value: '' },
+                { label: 'Font Color', labelPath: 'FONTCOLOR', type: 'color', key: 'style.fontColor', value: '' },
                 {
-                    label: 'Font Size', labelPath: 'FONTSIZE', type: 'number', key: 'fontSize', value: 14
+                    label: 'Font Size', labelPath: 'FONTSIZE', type: 'number', key: 'style.fontSize', value: 14
                 },
                 {
-                    label: 'Font Weight', labelPath: 'FONTWEIGHT', type: 'select', key: 'fontWeight', value: '',
+                    label: 'Font Weight', labelPath: 'FONTWEIGHT', type: 'select', key: 'style.fontWeight', value: '',
                     options: [
                         { value: '400', label: '400-Normal', labelPath: 'FONTWEIGHT_NORMAL' },
                         { value: '500', label: '500-Medium', labelPath: 'FONTWEIGHT_MEDIUM' },
@@ -62019,7 +62019,7 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Font Style', labelPath: 'FONTSTYLE', type: 'select', key: 'fontStyle', value: '',
+                    label: 'Font Style', labelPath: 'FONTSTYLE', type: 'select', key: 'style.fontStyle', value: '',
                     options: [
                         { label: 'Normal', labelPath: 'FONTSTYLE_NORMAL', value: 'normal' },
                         { label: 'Bold', labelPath: 'FONTSTYLE_BOLD', value: 'bold' },
@@ -62027,11 +62027,11 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Margin', labelPath: 'MARGIN', type: 'marginPicker', key: 'margin',
+                    label: 'Margin', labelPath: 'MARGIN', type: 'marginPicker', key: 'style.margin',
                     placeholder: 'Left, Top, Right, Bottom', value: [0, 0, 0, 0]
                 },
                 {
-                    label: 'Align Item', labelPath: 'ALIGNITEM', type: 'select', key: 'alignItems', value: '',
+                    label: 'Align Item', labelPath: 'ALIGNITEM', type: 'select', key: 'style.alignment', value: '',
                     options: [
                         { label: 'Left', labelPath: 'ALIGNITEM_LEFT', value: 'left' },
                         { label: 'Center', labelPath: 'ALIGNITEM_CENTER', value: 'center' },
@@ -62058,18 +62058,23 @@ class PdfPropertiesComponent {
             ],
             appearance: [
                 {
-                    label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
-                    options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
+                    label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
+                    options: [
+                        { value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
+                        { value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
+                        { value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
+                        { value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
+                    ]
                 },
-                { label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
+                { label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
                 {
                     label: 'Font Size',
                     type: 'number',
-                    key: 'fontSize',
+                    key: 'style.fontSize',
                     value: 14
                 },
                 {
-                    label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
+                    label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
                     options: [
                         { value: '400', label: '400-Normal' },
                         { value: '500', label: '500-Medium' },
@@ -62078,7 +62083,7 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
+                    label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
                     options: [
                         { label: 'Normal', value: 'normal' },
                         { label: 'Bold', value: 'bold' },
@@ -62086,12 +62091,12 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Margin', type: 'marginPicker', key: 'margin',
+                    label: 'Margin', type: 'marginPicker', key: 'style.margin',
                     placeholder: 'Left, Top, Right, Bottom',
                     value: [0, 0, 0, 0]
                 },
                 {
-                    label: 'Align Item', type: 'select', key: 'alignItems', value: '',
+                    label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
                     options: [
                         { label: 'Left', value: 'left' },
                         { label: 'Center', value: 'center' },
@@ -62118,18 +62123,23 @@ class PdfPropertiesComponent {
             ],
             appearance: [
                 {
-                    label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
-                    options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
+                    label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
+                    options: [
+                        { value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
+                        { value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
+                        { value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
+                        { value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
+                    ]
                 },
-                { label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
+                { label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
                 {
                     label: 'Font Size',
                     type: 'number',
-                    key: 'fontSize',
+                    key: 'style.fontSize',
                     value: 14
                 },
                 {
-                    label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
+                    label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
                     options: [
                         { value: '400', label: '400-Normal' },
                         { value: '500', label: '500-Medium' },
@@ -62138,7 +62148,7 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
+                    label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
                     options: [
                         { label: 'Normal', value: 'normal' },
                         { label: 'Bold', value: 'bold' },
@@ -62146,12 +62156,12 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Margin', type: 'marginPicker', key: 'margin',
+                    label: 'Margin', type: 'marginPicker', key: 'style.margin',
                     placeholder: 'Left, Top, Right, Bottom',
                     value: [0, 0, 0, 0]
                 },
                 {
-                    label: 'Align Item', type: 'select', key: 'alignItems', value: '',
+                    label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
                     options: [
                         { label: 'Left', value: 'left' },
                         { label: 'Center', value: 'center' },
@@ -62184,24 +62194,33 @@ class PdfPropertiesComponent {
                 { label: 'Padding Bottom', type: 'number', key: 'paddingBottom', placeholder: 'Enter padding bottom' },
                 {
                     label: 'Line Style', type: 'select', key: 'lineStyle',
-                    options: ['Solid', 'Dashed', 'Dotted']
+                    options: [
+                        { value: 'Solid', label: 'Solid', labelPath: 'BORDER_STYLE_SOLID' },
+                        { value: 'Dashed', label: 'Dashed', labelPath: 'BORDER_STYLE_DASHED' },
+                        { value: 'Dotted', label: 'Dotted', labelPath: 'BORDER_STYLE_DOTTED' }
+                    ]
                 }
             ],
             fieldProps: [],
             appearance: [
                 {
-                    label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
-                    options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
+                    label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
+                    options: [
+                        { value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
+                        { value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
+                        { value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
+                        { value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
+                    ]
                 },
-                { label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
+                { label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
                 {
                     label: 'Font Size',
                     type: 'number',
-                    key: 'fontSize',
+                    key: 'style.fontSize',
                     value: 14
                 },
                 {
-                    label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
+                    label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
                     options: [
                         { value: '400', label: '400-Normal' },
                         { value: '500', label: '500-Medium' },
@@ -62210,7 +62229,7 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
+                    label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
                     options: [
                         { label: 'Normal', value: 'normal' },
                         { label: 'Bold', value: 'bold' },
@@ -62218,18 +62237,18 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Margin', type: 'marginPicker', key: 'margin',
+                    label: 'Margin', type: 'marginPicker', key: 'style.margin',
                     placeholder: 'Left, Top, Right, Bottom',
                     value: [0, 0, 0, 0]
                 },
-                // {
-                //   label: 'Align Item', type: 'select', key: 'alignItems', value: '',
-                //   options: [
-                //     { label: 'Left', value: 'left' },
-                //     { label: 'Center', value: 'center' },
-                //     { label: 'Right', value: 'right' }
-                //   ]
-                // }
+                {
+                    label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
+                    options: [
+                        { label: 'Left', value: 'left' },
+                        { label: 'Center', value: 'center' },
+                        { label: 'Right', value: 'right' }
+                    ]
+                }
             ]
         },
         'Space': {
@@ -62240,18 +62259,23 @@ class PdfPropertiesComponent {
             fieldProps: [],
             appearance: [
                 {
-                    label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
-                    options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
+                    label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
+                    options: [
+                        { value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
+                        { value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
+                        { value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
+                        { value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
+                    ]
                 },
-                { label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
+                { label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
                 {
                     label: 'Font Size',
                     type: 'number',
-                    key: 'fontSize',
+                    key: 'style.fontSize',
                     value: 14
                 },
                 {
-                    label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
+                    label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
                     options: [
                         { value: '400', label: '400-Normal' },
                         { value: '500', label: '500-Medium' },
@@ -62260,7 +62284,7 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
+                    label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
                     options: [
                         { label: 'Normal', value: 'normal' },
                         { label: 'Bold', value: 'bold' },
@@ -62268,12 +62292,12 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Margin', type: 'marginPicker', key: 'margin',
+                    label: 'Margin', type: 'marginPicker', key: 'style.margin',
                     placeholder: 'Left, Top, Right, Bottom',
                     value: [0, 0, 0, 0]
                 },
                 // {
-                //   label: 'Align Item', type: 'select', key: 'alignItems', value: '',
+                //   label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
                 //   options: [
                 //     { label: 'Left', value: 'left' },
                 //     { label: 'Center', value: 'center' },
@@ -62299,18 +62323,23 @@ class PdfPropertiesComponent {
             ],
             appearance: [
                 {
-                    label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
-                    options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
+                    label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
+                    options: [
+                        { value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
+                        { value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
+                        { value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
+                        { value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
+                    ]
                 },
-                { label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
+                { label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
                 {
                     label: 'Font Size',
                     type: 'number',
-                    key: 'fontSize',
+                    key: 'style.fontSize',
                     value: 14
                 },
                 {
-                    label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
+                    label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
                     options: [
                         { value: '400', label: '400-Normal' },
                         { value: '500', label: '500-Medium' },
@@ -62319,7 +62348,7 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
+                    label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
                     options: [
                         { label: 'Normal', value: 'normal' },
                         { label: 'Bold', value: 'bold' },
@@ -62327,12 +62356,12 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Margin', type: 'marginPicker', key: 'margin',
+                    label: 'Margin', type: 'marginPicker', key: 'style.margin',
                     placeholder: 'Left, Top, Right, Bottom',
                     value: [0, 0, 0, 0]
                 },
                 // {
-                //   label: 'Align Item', type: 'select', key: 'alignItems', value: '',
+                //   label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
                 //   options: [
                 //     { label: 'Left', value: 'left' },
                 //     { label: 'Center', value: 'center' },
@@ -62361,55 +62390,64 @@ class PdfPropertiesComponent {
                         { "label": "operands", "placeholder": "Enter here", "type": "array", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operands" },
                     ]
                 },
-                { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
-                { "label": "tableScaleSize", "placeholder": "06 - Full Scale", "type": "text", "key": "tableScaleSize" },
-                { "label": "rowChoice", "placeholder": "", "type": "text", "key": "rowChoice" },
+            ],
+            "fieldProps": [
+                { label: 'Value', placeholder: 'Enter Text ', type: 'text', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'value' },
+                { label: 'Reference Field', placeholder: 'Reference Field', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", type: 'text', key: 'referenceField' },
                 {
-                    "label": "quickActionTools",
-                    "type": "group",
-                    "key": "quickActionTools",
-                    "children": [
-                        { "label": "edit", "type": "toggle", "key": "edit" },
-                        { "label": "view", "type": "toggle", "key": "view" },
-                        { "label": "delete", "type": "toggle", "key": "delete" }
+                    "label": "", "placeholder": "Enter Text", "type": "subQuestion", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "isSubText",
+                    "subQuestion": []
+                }
+            ],
+            "appearance": [
+                {
+                    label: 'Select Font', type: 'select', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.font', placeholder: 'Left',
+                    options: [
+                        { value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
+                        { value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
+                        { value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
+                        { value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
                     ]
                 },
-                { "label": "addRecordEvent", "type": "toggle", "key": "addRecordEvent" },
+                { label: 'Font Color', type: 'color', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.fontColor', value: '' },
                 {
-                    "label": "tableScrollEventChoice",
-                    "type": "group",
-                    "key": "tableScrollEventChoice",
-                    "children": [
-                        { "label": "horizontal", "type": "toggle", "key": "horizontal" },
-                        { "label": "vertical", "type": "toggle", "key": "vertical" }
+                    label: 'Font Size', type: 'select', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.fontSize', value: '',
+                    options: [
+                        { label: 'Small', value: '12px' },
+                        { label: 'Medium', value: '14px' },
+                        { label: 'Large', value: '16px' }
+                    ]
+                },
+                {
+                    label: 'Font Width', type: 'select', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.fontWeight', value: '',
+                    options: [
+                        { value: '400', label: '400-Normal' },
+                        { value: '500', label: '500-Medium' },
+                        { value: '600', label: '600-Semi Bold' },
+                        { value: '700', label: '700-Bold' }
+                    ]
+                },
+                {
+                    label: 'Font Style', type: 'select', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.fontStyle', value: '',
+                    options: [
+                        { label: 'Normal', value: 'normal' },
+                        { label: 'Bold', value: 'bold' },
+                        { label: 'Italic', value: 'italic' }
+                    ]
+                },
+                {
+                    label: 'Margin', type: 'marginPicker', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.margin',
+                    placeholder: 'Left, Top, Right, Bottom',
+                    value: [0, 0, 0, 0]
+                },
+                {
+                    label: 'Align Item', type: 'select', "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", key: 'style.alignment', value: '',
+                    options: [
+                        { label: 'Left', value: 'left' },
+                        { label: 'Center', value: 'center' },
+                        { label: 'Right', value: 'right' }
                     ]
                 }
-            ],
-            "fieldProps": [
-                { "label": "tableId", "placeholder": "Emp_Table_01", "type": "text", "key": "tableId" },
-                { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
-                { "label": "requiredField", "type": "toggle", "key": "requiredField" },
-                { "label": "Read Only", "type": "checkbox", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "edit" },
-                { "label": "hideLabel", "type": "toggle", "key": "hideLabel" },
-                { "label": "disabled", "type": "toggle", "key": "disabled" },
-                { "label": "hideElements", "type": "toggle", "key": "hideElements" },
-                { "label": "masking", "type": "toggle", "key": "masking" },
-                { "label": "value", "placeholder": "Value", "type": "text", "key": "value" },
-                { "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
-                { "label": "controllingElements", "type": "toggle", "key": "controllingElements" },
-                { "label": "isDependence", "type": "toggle", "key": "isDependence" },
-                { "label": "newLine", "type": "toggle", "key": "newLine" }
-            ],
-            "appearance": [
-                { "label": "selectFont", "placeholder": "Left", "type": "text", "key": "selectFont" },
-                { "label": "fontColor", "placeholder": "#28343E", "type": "text", "key": "fontColor" },
-                { "label": "hexCode", "placeholder": "#28343E", "type": "text", "key": "hexCode" },
-                { "label": "fontSize", "placeholder": "300 - Medium", "type": "text", "key": "fontSize" },
-                { "label": "fontWidth", "placeholder": "Left", "type": "text", "key": "fontWidth" },
-                { "label": "backgroundColor", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundColor" },
-                { "label": "backgroundHexCode", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundHexCode" },
-                { "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
-                { "label": "blankSpace", "type": "toggle", "key": "blankSpace" }
             ]
         },
         'TextArea': {
@@ -62429,12 +62467,17 @@ class PdfPropertiesComponent {
             ],
             appearance: [
                 {
-                    label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
-                    options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
+                    label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
+                    options: [
+                        { value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
+                        { value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
+                        { value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
+                        { value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
+                    ]
                 },
-                { label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
+                { label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
                 {
-                    label: 'Font Size', type: 'select', key: 'fontSize', value: '',
+                    label: 'Font Size', type: 'select', key: 'style.fontSize', value: '',
                     options: [
                         { label: 'Small', value: '12px' },
                         { label: 'Medium', value: '14px' },
@@ -62442,15 +62485,14 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Font Width', type: 'select', key: 'fontWeight', value: '',
+                    label: 'Font Width', type: 'select', key: 'style.fontWeight', value: '',
                     options: [
                         { value: '400', label: '400-Normal' },
                         { value: '500', label: '500-Medium' },
                         { value: '600', label: '600-Semi Bold' },
                         { value: '700', label: '700-Bold' }
                     ]
-                },
-                // { label: 'Background Color', type: 'color', key: 'backgroundColor', value: '' },
+                }
             ]
         },
         'image': {
@@ -62470,18 +62512,23 @@ class PdfPropertiesComponent {
             ],
             appearance: [
                 {
-                    label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left',
-                    options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
+                    label: 'Select Font', type: 'select', key: 'style.font', placeholder: 'Left',
+                    options: [
+                        { value: 'Helvetica Neue', label: 'Helvetica Neue', labelPath: 'FONT_FAMILY_HELVETICA_NEUE' },
+                        { value: 'Arial', label: 'Arial', labelPath: 'FONT_FAMILY_ARIAL' },
+                        { value: 'Times New Roman', label: 'Times New Roman', labelPath: 'FONT_FAMILY_TIMES_NEW_ROMAN' },
+                        { value: 'Roboto', label: 'Roboto', labelPath: 'FONT_FAMILY_ROBOTO' }
+                    ]
                 },
-                { label: 'Font Color', type: 'color', key: 'fontColor', value: '' },
+                { label: 'Font Color', type: 'color', key: 'style.fontColor', value: '' },
                 {
                     label: 'Font Size',
                     type: 'number',
-                    key: 'fontSize',
+                    key: 'style.fontSize',
                     value: 14
                 },
                 {
-                    label: 'Font Weight', type: 'select', key: 'fontWeight', value: '',
+                    label: 'Font Weight', type: 'select', key: 'style.fontWeight', value: '',
                     options: [
                         { value: '400', label: '400-Normal' },
                         { value: '500', label: '500-Medium' },
@@ -62490,7 +62537,7 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Font Style', type: 'select', key: 'fontStyle', value: '',
+                    label: 'Font Style', type: 'select', key: 'style.fontStyle', value: '',
                     options: [
                         { label: 'Normal', value: 'normal' },
                         { label: 'Bold', value: 'bold' },
@@ -62498,12 +62545,12 @@ class PdfPropertiesComponent {
                     ]
                 },
                 {
-                    label: 'Margin', type: 'marginPicker', key: 'margin',
+                    label: 'Margin', type: 'marginPicker', key: 'style.margin',
                     placeholder: 'Left, Top, Right, Bottom',
                     value: [0, 0, 0, 0]
                 },
                 {
-                    label: 'Align Item', type: 'select', key: 'alignItems', value: '',
+                    label: 'Align Item', type: 'select', key: 'style.alignment', value: '',
                     options: [
                         { label: 'Left', value: 'left' },
                         { label: 'Center', value: 'center' },
@@ -62549,8 +62596,8 @@ class PdfPropertiesComponent {
                 else {
                     this.selectColumn = null;
                 }
-                if (!this.selectedElement.margin) {
-                    this.selectedElement.margin = [0, 0, 0, 0];
+                if (this.selectedElement && !this.selectedElement?.margin) {
+                    this.selectedElement['margin'] = [0, 0, 0, 0];
                 }
             }
             this.getProperties();
@@ -62761,12 +62808,6 @@ class PdfPropertiesComponent {
         });
         this.pdfDesignerService.elementUpdate(this.selectedElement);
     }
-    getStyleKeys() {
-        if (!this.selectedElement || !this.selectedElement.style || typeof this.selectedElement.style !== 'object') {
-            return [];
-        }
-        return Object.keys(this.selectedElement.style);
-    }
     // SKS19MAR25 update element in servies
     updateElement(element) {
         this.pdfDesignerService.elementUpdate(element);
@@ -63001,11 +63042,11 @@ class PdfPropertiesComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PdfPropertiesComponent, deps: [{ token: DataService }, { token: i1$1.HttpClient }, { token: PdfDesignerService }, { token: TemplateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PdfPropertiesComponent, isStandalone: true, selector: "app-pdf-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!--  - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!--  Select element type show -->\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search pdf specific for pdf element -->\n      <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n        <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n              [placeHolderText]=\"selectedElement.question || ''\"\n              [mode]=\"'edit'\"\n              (searchValueChange)=\"childEventCapture($event)\">\n          </nxt-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label \n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">---Select---</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label  }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</span>\n\n          </div>\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!--  Change key width -->\n          <div *ngIf=\"prop.key === 'width'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n            <select\n              class=\"size-select\"\n              [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n              (change)=\"onWidthSelect(\n                $event.target.value === 'Default' ? '*' :\n                $event.target.value === 'Auto' ? 'auto' : 'custom'\n              )\">\n              <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n              <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n              <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n            </select>\n          \n            <input\n              *ngIf=\"selectedElement?.width !== '*' && selectedElement?.width !== 'auto'\"\n              type=\"number\"\n              class=\"size-input\"\n              min=\"1\"\n              max=\"100\"\n              [value]=\"selectedElement?.width\"\n              (input)=\"setValueByPath(\n                'width',\n                $event.target.valueAsNumber < 1 ? 1 :\n                $event.target.valueAsNumber > 100 ? 100 :\n                $event.target.valueAsNumber\n              )\" />\n          </div>                   \n\n          <!--  Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!--  Show elements ID  -->\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n      <label>Label Id</label>\n      <div\n        style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n          </div>\n\n          <!--  - handled options with UUID -->\n          <div\n            *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!--  Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n\n      <!-- SKS21MAR25 Move Style Outside the Loop -->\n      <!-- Style Toggle -->\n      <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n        <div class=\"head-elements\">Style</div>\n        <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n          alt=\"Toggle Arrow\" class=\"arrow-icon\">\n      </div>\n\n      <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n        <div class=\"form-group\">\n          <div *ngFor=\"let key of getStyleKeys()\">\n            <label>{{ key }}</label>\n            <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n              (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</label>\n          <!-- Font Selection -->\n          <div *ngIf=\"prop.key === 'font'\">\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n              (change)=\"setValueByPath('font', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n          <!-- Font Size -->\n          <div *ngIf=\"prop.key === 'fontSize' && prop.type === 'number'\">\n            <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n                  [(ngModel)]=\"selectedElement.fontSize\"\n                  (change)=\"setValueByPath('fontSize', selectedElement.fontSize)\" />\n          </div>\n          <!-- Font Weight Selection -->\n          <div *ngIf=\"prop.key === 'fontWeight'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.labelPath | nxtCustomTranslate : option.label  }}\n              </option>\n            </select>\n          </div>\n\n          <div class=\"flex-container\">\n            <!-- Dropdown Box -->\n            <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n              <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n                <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                  {{ option }}\n                </option>\n              </select>\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n                (change)=\"setValueByPath('fontColor', $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n                (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n          </div>\n\n          <!-- Font Style -->\n<div *ngIf=\"prop.key === 'fontStyle'\">\n  <select [(ngModel)]=\"selectedElement.fontStyle\"\n          (change)=\"setValueByPath('fontStyle', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n      {{ option.labelPath | nxtCustomTranslate : option.label  }}\n    </option>\n  </select>\n</div>\n\n<!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n<div *ngIf=\"prop.key === 'margin'&& selectedElement?.margin\">\n  <div class=\"margin-inputs\">\n    <div>\n      <label>Right</label>\n      <input type=\"number\" [(ngModel)]=\"selectedElement.margin[1]\"\n             (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n    </div>\n    <div>\n      <label>Bottom</label>\n      <input type=\"number\" [(ngModel)]=\"selectedElement.margin[2]\"\n             (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n    </div>\n    <div>\n      <label>Left</label>\n      <input type=\"number\" [(ngModel)]=\"selectedElement.margin[3]\"\n             (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n    </div>\n    <div>\n      <label>Top</label>\n      <input type=\"number\" [(ngModel)]=\"selectedElement.margin[0]\"\n             (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n    </div>\n  </div>\n</div>\n\n          <!-- TextAlign -->\n          <div *ngIf=\"prop.key === 'alignItems'\">\n            <select [(ngModel)]=\"selectedElement.alignItems\"\n                    (change)=\"setValueByPath('alignItems', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.labelPath | nxtCustomTranslate : option.label  }}\n              </option>\n            </select>\n          </div>          \n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value"], outputs: ["searchValueChange"] }, { 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: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PdfPropertiesComponent, isStandalone: true, selector: "app-pdf-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!--  - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!--  Select element type show -->\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n        </image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search pdf specific for pdf element -->\n      <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n        <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n              [placeHolderText]=\"selectedElement.question || ''\"\n              [mode]=\"'edit'\"\n              (searchValueChange)=\"childEventCapture($event)\">\n          </nxt-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label \n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">---Select---</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label  }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</span>\n\n          </div>\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!--  Change key width -->\n          <div *ngIf=\"prop.key === 'width'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n            <select\n              class=\"size-select\"\n              [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n              (change)=\"onWidthSelect(\n                $event.target.value === 'Default' ? '*' :\n                $event.target.value === 'Auto' ? 'auto' : 'custom'\n              )\">\n              <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n              <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n              <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n            </select>\n          \n            <input\n              *ngIf=\"selectedElement?.width !== '*' && selectedElement?.width !== 'auto'\"\n              type=\"number\"\n              class=\"size-input\"\n              min=\"1\"\n              max=\"100\"\n              [value]=\"selectedElement?.width\"\n              (input)=\"setValueByPath(\n                'width',\n                $event.target.valueAsNumber < 1 ? 1 :\n                $event.target.valueAsNumber > 100 ? 100 :\n                $event.target.valueAsNumber\n              )\" />\n          </div>                   \n\n          <!--  Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!--  Show elements ID  -->\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n      <label>Label Id</label>\n      <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n          </div>\n\n          <!--  - handled options with UUID -->\n          <div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!--  Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</label>\n          <div class=\"flex-container\">\n            <!-- Type select -->\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n              (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.labelPath | nxtCustomTranslate : option.label  }}\n              </option>\n            </select>\n            <!-- Input Box -->\n            <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n              [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n            <!-- Type number -->\n            <div *ngIf=\"prop.type === 'number'\">\n              <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n                    [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n                    (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n                (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n                (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n             <!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n            <div *ngIf=\"prop.type === 'marginPicker'\">\n              <div class=\"margin-inputs\">\n                <div>\n                  <label>Right</label>\n                  <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[0] : getValueByPath(prop.key)?.[0] ) : getValueByPath(prop.key)?.[0])\"\n                        (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.0', $event) : setValueByPath(prop.key+'.0', $event.target.value) ) : setValueByPath(prop.key+'.0', $event.target.value)\" />\n                </div>\n                <div>\n                  <label>Top</label>\n                  <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[1] : getValueByPath(prop.key)?.[1] ) : getValueByPath(prop.key)?.[1])\"\n                        (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.1', $event) : setValueByPath(prop.key+'.1', $event.target.value) ) : setValueByPath(prop.key+'.1', $event.target.value)\" />\n                </div>\n                <div>\n                  <label>Left</label>\n                  <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[2] : getValueByPath(prop.key)?.[2] ) : getValueByPath(prop.key)?.[2])\"\n                        (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.2', $event) : setValueByPath(prop.key+'.2', $event.target.value) ) : setValueByPath(prop.key+'.2', $event.target.value)\" />\n                </div>\n                <div>\n                  <label>Bottom</label>\n                  <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[3] : getValueByPath(prop.key)?.[3] ) : getValueByPath(prop.key)?.[3])\"\n                        (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.3', $event) : setValueByPath(prop.key+'.3', $event.target.value) ) : setValueByPath(prop.key+'.3', $event.target.value)\" />\n                </div>\n              </div>\n            </div> \n          </div>     \n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:40px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "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.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: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from", "value"], outputs: ["searchValueChange"] }, { 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: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PdfPropertiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pdf-properties', standalone: true, imports: [CommonModule, FormsModule, NxtSearchBox, ImageCropperComponent, NxtCustomTranslatePipe], template: "<!--  - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!--  Select element type show -->\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search pdf specific for pdf element -->\n      <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n        <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n              [placeHolderText]=\"selectedElement.question || ''\"\n              [mode]=\"'edit'\"\n              (searchValueChange)=\"childEventCapture($event)\">\n          </nxt-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label \n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">---Select---</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label  }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</span>\n\n          </div>\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!--  Change key width -->\n          <div *ngIf=\"prop.key === 'width'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n            <select\n              class=\"size-select\"\n              [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n              (change)=\"onWidthSelect(\n                $event.target.value === 'Default' ? '*' :\n                $event.target.value === 'Auto' ? 'auto' : 'custom'\n              )\">\n              <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n              <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n              <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n            </select>\n          \n            <input\n              *ngIf=\"selectedElement?.width !== '*' && selectedElement?.width !== 'auto'\"\n              type=\"number\"\n              class=\"size-input\"\n              min=\"1\"\n              max=\"100\"\n              [value]=\"selectedElement?.width\"\n              (input)=\"setValueByPath(\n                'width',\n                $event.target.valueAsNumber < 1 ? 1 :\n                $event.target.valueAsNumber > 100 ? 100 :\n                $event.target.valueAsNumber\n              )\" />\n          </div>                   \n\n          <!--  Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!--  Show elements ID  -->\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n      <label>Label Id</label>\n      <div\n        style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n          </div>\n\n          <!--  - handled options with UUID -->\n          <div\n            *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!--  Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n\n      <!-- SKS21MAR25 Move Style Outside the Loop -->\n      <!-- Style Toggle -->\n      <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n        <div class=\"head-elements\">Style</div>\n        <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n          alt=\"Toggle Arrow\" class=\"arrow-icon\">\n      </div>\n\n      <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n        <div class=\"form-group\">\n          <div *ngFor=\"let key of getStyleKeys()\">\n            <label>{{ key }}</label>\n            <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n              (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n          </div>\n        </div>\n      </div>\n\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</label>\n          <!-- Font Selection -->\n          <div *ngIf=\"prop.key === 'font'\">\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n              (change)=\"setValueByPath('font', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                {{ option }}\n              </option>\n            </select>\n          </div>\n          <!-- Input Box -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n          <!-- Font Size -->\n          <div *ngIf=\"prop.key === 'fontSize' && prop.type === 'number'\">\n            <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n                  [(ngModel)]=\"selectedElement.fontSize\"\n                  (change)=\"setValueByPath('fontSize', selectedElement.fontSize)\" />\n          </div>\n          <!-- Font Weight Selection -->\n          <div *ngIf=\"prop.key === 'fontWeight'\">\n            <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n              (change)=\"setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.labelPath | nxtCustomTranslate : option.label  }}\n              </option>\n            </select>\n          </div>\n\n          <div class=\"flex-container\">\n            <!-- Dropdown Box -->\n            <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n              <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n                <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n                  {{ option }}\n                </option>\n              </select>\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n                (change)=\"setValueByPath('fontColor', $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n                (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n          </div>\n\n          <!-- Font Style -->\n<div *ngIf=\"prop.key === 'fontStyle'\">\n  <select [(ngModel)]=\"selectedElement.fontStyle\"\n          (change)=\"setValueByPath('fontStyle', $event.target.value)\">\n    <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n      {{ option.labelPath | nxtCustomTranslate : option.label  }}\n    </option>\n  </select>\n</div>\n\n<!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n<div *ngIf=\"prop.key === 'margin'&& selectedElement?.margin\">\n  <div class=\"margin-inputs\">\n    <div>\n      <label>Right</label>\n      <input type=\"number\" [(ngModel)]=\"selectedElement.margin[1]\"\n             (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n    </div>\n    <div>\n      <label>Bottom</label>\n      <input type=\"number\" [(ngModel)]=\"selectedElement.margin[2]\"\n             (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n    </div>\n    <div>\n      <label>Left</label>\n      <input type=\"number\" [(ngModel)]=\"selectedElement.margin[3]\"\n             (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n    </div>\n    <div>\n      <label>Top</label>\n      <input type=\"number\" [(ngModel)]=\"selectedElement.margin[0]\"\n             (change)=\"setValueByPath('margin', selectedElement.margin)\" />\n    </div>\n  </div>\n</div>\n\n          <!-- TextAlign -->\n          <div *ngIf=\"prop.key === 'alignItems'\">\n            <select [(ngModel)]=\"selectedElement.alignItems\"\n                    (change)=\"setValueByPath('alignItems', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.labelPath | nxtCustomTranslate : option.label  }}\n              </option>\n            </select>\n          </div>          \n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"] }]
+            args: [{ selector: 'app-pdf-properties', standalone: true, imports: [CommonModule, FormsModule, NxtSearchBox, ImageCropperComponent, NxtCustomTranslatePipe], template: "<!--  - Field and Element Properties -->\n<div class=\"container\">\n  <div class=\"tabs\">\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n      {{ 'ATTRIBUTES' | nxtCustomTranslate : 'Attributes' }}\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n      {{ 'PROPERTY' | nxtCustomTranslate : 'Property' }}\n    </div>\n    <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n      {{ 'APPEARANCE' | nxtCustomTranslate : 'Appearance' }}\n    </div>\n  </div>\n\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <!-- Element Properrties -->\n    <!--  Select element type show -->\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type] as props\">\n      <!-- SKS25MAR25 this is for image edit -->\n      <div *ngIf=\"selectedElement?.type === 'image'\">\n        <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n          [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n          imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n          [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n          [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n          [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n          [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n          [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n          [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n          (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n        </image-cropper>\n        <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n            title=\"Flip Horizontally\">\u2194</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n            title=\"Flip Vertically\">\u2195</div>\n          <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n        </div>\n      </div>\n      <!-- SKS28MAR25 search pdf specific for pdf element -->\n      <div *ngIf=\"selectedElement?.type === 'Pdf'\">\n        <label class=\"text-sm\">{{ 'SEARCHPDF' | nxtCustomTranslate : 'Search Pdf' }}</label>\n        <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n          <nxt-search-box [question]=\"selectedElement\" [readOnly]=\"selectedElement.isReadOnly\" [apiMeta]=\"bookSubtext\"\n              [placeHolderText]=\"selectedElement.question || ''\"\n              [mode]=\"'edit'\"\n              (searchValueChange)=\"childEventCapture($event)\">\n          </nxt-search-box>\n          <div class=\"link-icon\">\n            <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n              xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n              viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n              <g>\n                <g>\n                  <g>\n                    <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n          c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n          c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n          c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n          C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n          l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n          c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n          C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n          c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n          c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n          C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n                    <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n           M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n          c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n          c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n          c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n          c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n          c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n                  </g>\n                </g>\n              </g>\n            </svg>\n            <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n              <label>{{ 'ENDPOINT' | nxtCustomTranslate : 'Endpoint' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n              <label>{{ 'VARIABLE' | nxtCustomTranslate : 'Variable' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n              <label>{{ 'FIELD' | nxtCustomTranslate : 'Field' }}:</label>\n              <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n              <label>{{ 'DEFAULTFIELD' | nxtCustomTranslate : 'Default Field' }}:</label>\n              <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n            </div>\n          </div>\n        </div>\n      </div>\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].elementProps\">\n        <div class=\"form-group\">\n          <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label \n            }}</label>\n\n          <!-- Text Input -->\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- questionNumber -->\n          <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n            (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n          <!-- file -->\n          <!-- Add this inside the elementProps loop where other inputs are rendered -->\n          <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\n            <option value=\"\">---Select---</option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label  }} </option>\n          </select>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n              <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</span>\n\n          </div>\n          <!-- SKS20MAR25 Subquestion Type -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n              <div>{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</div>\n              <input type=\"checkbox\"\n                [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n                (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n            </div>\n            <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n            <div\n              *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key)\">\n              <div *ngFor=\"let subProp of prop.subQuestion\"\n                style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n                  <div *ngIf=\"subProp.type === 'array'\">\n                    <!-- Iterate over filtered columns to display checkboxes -->\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"checkbox\"\n                          [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n                          (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS21MAR25 New radio type -->\n                  <div *ngIf=\"subProp.type === 'radio'\">\n                    <div *ngFor=\"let column of filteredColumns\">\n                      <label>\n                        <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n                          [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n                          (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n                        {{ column.apiName }}\n                      </label>\n                    </div>\n                  </div>\n                  <!-- SKS20MAR25 Add more subproperty types as needed -->\n                  <!-- Inside the subProp ngFor loop -->\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                  <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n                    <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n                  </select>\n                  <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- SKS20MAR25 Text Align Buttons -->\n          <div *ngIf=\"prop.type === 'align'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n              [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <div *ngIf=\"prop.type === 'style'\">\n            <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n              [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n              <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n            </button>\n          </div>\n\n          <!-- Field Size Controls -->\n          <!--  Change key width -->\n          <div *ngIf=\"prop.key === 'width'\" [ngClass]=\"{'flex-container': true, 'custom-active': selectedElement?.width !== '*' && selectedElement?.width !== 'auto'}\">\n            <select\n              class=\"size-select\"\n              [value]=\"selectedElement?.width === '*' ? 'Default' : selectedElement?.width === 'auto' ? 'Auto' : 'Custom'\"\n              (change)=\"onWidthSelect(\n                $event.target.value === 'Default' ? '*' :\n                $event.target.value === 'Auto' ? 'auto' : 'custom'\n              )\">\n              <option value=\"Default\">{{ 'DEFAULT' | nxtCustomTranslate : 'Default' }}</option>\n              <option value=\"Auto\">{{ 'AUTO' | nxtCustomTranslate : 'Auto' }}</option>\n              <option value=\"Custom\">{{ 'CUSTOM' | nxtCustomTranslate : 'Custom' }}</option>\n            </select>\n          \n            <input\n              *ngIf=\"selectedElement?.width !== '*' && selectedElement?.width !== 'auto'\"\n              type=\"number\"\n              class=\"size-input\"\n              min=\"1\"\n              max=\"100\"\n              [value]=\"selectedElement?.width\"\n              (input)=\"setValueByPath(\n                'width',\n                $event.target.valueAsNumber < 1 ? 1 :\n                $event.target.valueAsNumber > 100 ? 100 :\n                $event.target.valueAsNumber\n              )\" />\n          </div>                   \n\n          <!--  Line Properties -->\n          <!-- Padding Top -->\n          <div *ngIf=\"prop.key === 'paddingTop'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n              (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n          </div>\n\n          <!-- Padding Bottom -->\n          <div *ngIf=\"prop.key === 'paddingBottom'\">\n            <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n              (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n          </div>\n\n          <!-- Line Style -->\n          <div *ngIf=\"prop.key === 'lineStyle'\">\n            <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n            </select>\n          </div>\n\n          <!-- Color -->\n          <div *ngIf=\"prop.key === 'color'\">\n            <input type=\"color\" [value]=\"selectedElement?.color\"\n              (input)=\"setValueByPath('color', $event.target.value)\" />\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n    <!-- Field Elements Properties -->\n    <!--  Show elements ID  -->\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n      <label>Label Id</label>\n      <div style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n        {{ headerSelect ? bookId : selectedElement.id }}</div>\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].fieldProps\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</label>\n\n          <!-- SKS21MAR25 Toggle Group -->\n          <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n            <div class=\"toggle-item\">\n              <label class=\"toggle-label\">\n                <input type=\"checkbox\" />\n                Disabled\n              </label>\n            </div>\n          </div>\n\n          <!--  - handled options with UUID -->\n          <div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n            class=\"options-container\">\n\n            <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n              <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n                draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n                <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n                <span class=\"drag-handle\">\u2630</span>\n              </div>\n            </div>\n\n            <button (click)=\"addOption(selectedElement[prop.key])\">\n              <div class=\"add-varient\">\n                <span class=\"text-lg\">+</span>\n                <span>Add</span>\n              </div>\n            </button>\n          </div>\n\n          <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n            [value]=\"headerSelect ? pdf.title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) :  getValueByPath(prop.key))\"\n            (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n            [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n          <!-- Sub Questions Toggle -->\n          <div *ngIf=\"prop.type === 'subQuestion'\">\n            <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n              <div class=\"head-elements\">Sub Text</div>\n              <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n                alt=\"Toggle Arrow\" class=\"arrow-icon\">\n            </div>\n\n            <!-- Render subquestions when arrow is down -->\n            <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n              <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n                <div class=\"form-group\">\n                  <label>{{ subProp.labelPath | nxtCustomTranslate : subProp.label }}</label>\n\n                  <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    \n                  <!--  Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n                    [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n                    (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div *ngIf=\"prop.type === 'checkbox'\">\n            <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</span>\n            <input type=\"checkbox\"\n              [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ):  getValueByPath(prop.key) \"\n              (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n          </div>\n\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <div *ngIf=\"elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type]\">\n      <ng-container *ngFor=\"let prop of elementProperties[selectedElement?.type === 'Table' && selectColumn !== '' && selectColumn !== null ? 'TableColumn' : selectedElement?.type].appearance\">\n        <div class=\"form-group\">\n          <label class=\"text-sm\">{{  prop.labelPath | nxtCustomTranslate : prop.label  }}</label>\n          <div class=\"flex-container\">\n            <!-- Type select -->\n            <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n              (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n              <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n                {{ option.labelPath | nxtCustomTranslate : option.label  }}\n              </option>\n            </select>\n            <!-- Input Box -->\n            <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n              [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n            <!-- Type number -->\n            <div *ngIf=\"prop.type === 'number'\">\n              <input type=\"number\" min=\"1\" max=\"100\" step=\"1\"\n                    [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n                    (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n\n            <!-- Color Picker -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n              <input type=\"color\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n                (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\">\n            </div>\n\n            <!-- HEX Input Box -->\n            <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n              <span>HEX Code</span>\n              <input type=\"text\" [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n                (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value)\" />\n            </div>\n             <!-- margin: [0, 10, 0, 0] // [ left, top, right, bottom ] -->\n            <div *ngIf=\"prop.type === 'marginPicker'\">\n              <div class=\"margin-inputs\">\n                <div>\n                  <label>Right</label>\n                  <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[0] : getValueByPath(prop.key)?.[0] ) : getValueByPath(prop.key)?.[0])\"\n                        (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.0', $event) : setValueByPath(prop.key+'.0', $event.target.value) ) : setValueByPath(prop.key+'.0', $event.target.value)\" />\n                </div>\n                <div>\n                  <label>Top</label>\n                  <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[1] : getValueByPath(prop.key)?.[1] ) : getValueByPath(prop.key)?.[1])\"\n                        (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.1', $event) : setValueByPath(prop.key+'.1', $event.target.value) ) : setValueByPath(prop.key+'.1', $event.target.value)\" />\n                </div>\n                <div>\n                  <label>Left</label>\n                  <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[2] : getValueByPath(prop.key)?.[2] ) : getValueByPath(prop.key)?.[2])\"\n                        (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.2', $event) : setValueByPath(prop.key+'.2', $event.target.value) ) : setValueByPath(prop.key+'.2', $event.target.value)\" />\n                </div>\n                <div>\n                  <label>Bottom</label>\n                  <input type=\"number\" [value]=\"(selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key )?.[3] : getValueByPath(prop.key)?.[3] ) : getValueByPath(prop.key)?.[3])\"\n                        (change)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key+'.3', $event) : setValueByPath(prop.key+'.3', $event.target.value) ) : setValueByPath(prop.key+'.3', $event.target.value)\" />\n                </div>\n              </div>\n            </div> \n          </div>     \n        </div>\n      </ng-container>\n    </div>\n  </div>\n\n<!-- Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n  <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n  <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:40px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 1099px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;gap:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.flex-container{display:flex;gap:8px;align-items:center}.size-select{transition:width .3s ease;width:100%;max-width:200px}.flex-container.custom-active .size-select{max-width:100px}.size-input{width:60px}.margin-inputs{display:flex;gap:15px;margin-top:5px}.margin-inputs>div{display:flex;flex-direction:column;width:60px}.margin-inputs label{font-size:12px;margin-bottom:3px}.pdf-actions-container{width:100%;max-width:400px;padding:10px}.pdf-action-card{background-color:#fff;border-radius:6px;padding:9px;box-shadow:0 2px 6px #0000001a;display:flex;flex-direction:column;gap:10px}.pdf-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.pdf-btn:hover{background-color:#5a6268}\n"] }]
         }], ctorParameters: () => [{ type: DataService }, { type: i1$1.HttpClient }, { type: PdfDesignerService }, { type: TemplateService }], propDecorators: { formButtonHandler: [{
                 type: Output
             }], templateSaveHandler: [{
@@ -63617,11 +63658,11 @@ class PdfDesignerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PdfDesignerComponent, deps: [{ token: PdfDesignerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview" }, 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\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<!-- \n      <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div> -->\n\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>\n    <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n    <div class=\"form-preview\">\n      <!-- AP-10MAR25 Heading -->\n      <div 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=\"padding: 10px; display: flex;justify-content: space-between;\">\n          <div *ngIf=\"pdf\">\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\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n        </div>\n\n        <!--SKS25MAR25 Image Upload Element -->\n        <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [class.highlight]=\"selectedFieldIndex === i && !isPreview\" draggable=\"true && !isPreview\"\n          (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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 *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                        fill=\"#6C757D\" />\n                    </svg>\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" \n                      [style.width.px]=\"field.imageSize?.width || 100\"\n                      [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\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\"\n              [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n              [value]=\"field.value? field.value : ''\"\n              (input)=\"onTextAreaInput($event, field)\"\n              #autoTextarea\n              [style.height.px]=\"isPreview ? 40 : null\"\n              (click)=\"openTextSettings(field, $event)\"\n              (ngModelChange)=\"updateContent()\" \n              [ngStyle]=\"{\n                'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n                'font-weight': field.style?.bold ? 'bold' : 'normal',\n                'font-style': field.style?.italics ? 'italic' : 'normal',\n                'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n                'text-align': field.style?.alignment || 'left',\n                'margin': field.style?.margin?.length === 4\n                  ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n                    field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n                  : '0',\n                'color': field.style?.color || '#000'\n              }\"></textarea>\n            \n            </div>\n          </div>\n\n                           <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                           <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n                           [ngStyle]=\"{\n                             position: 'absolute',\n                             background: '#fff',\n                             border: '1px solid #ccc',\n                             padding: '6px 10px',\n                             'border-radius': '4px',\n                             'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                             'z-index': '65535',\n                             display: 'flex',\n                             'align-items': 'center',\n                             gap: '8px'\n                           }\">\n                         \n                           <!-- Font Size -->\n                           <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                             <option [value]=\"12\">12pt</option>\n                             <option [value]=\"14\">14pt</option>\n                             <option [value]=\"16\">16pt</option>\n                             <option [value]=\"18\">18pt</option>\n                             <option [value]=\"24\">24pt</option>\n                           </select>\n\n                          <!-- Text Color -->\n                          <label title=\"Text Color\" class=\"color-label\">\n                          <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                          <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                          </label>\n\n                           <!-- Bold -->\n                           <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ '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\n                         \n                           <!-- Align Left -->\n                           <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | 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                          \n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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 app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div>\n                          <div class=\"logo-container\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                              <img [src]=\"field.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                              <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n                         (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-14JUN25 Added nxt-input in pdf -->\n                  <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\"> \n                        <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n                          [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n                        </nxt-input>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!--  Table  -->\n        <!-- AP-06MAR25 -->\n        <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ '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          <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\n          <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n            <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.width\"\n              (input)=\"onImageSizeChange()\" />\n          \n            <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.height\"\n              (input)=\"onImageSizeChange()\" />\n          </div>\n          \n\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:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:15px;height:15px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.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:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { 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", "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.14", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview" }, 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      <!--  <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div> -->\n\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>\n    <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n    <div class=\"form-preview\">\n      <!-- AP-10MAR25 Heading -->\n      <div 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=\"padding: 10px; display: flex;justify-content: space-between;\">\n          <div *ngIf=\"pdf\">\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\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\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              'border-width': (field?.style?.lineWidth || 1) + 'px',\n              'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n              'color': field?.style?.fontColor || '#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\" (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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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 *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                        fill=\"#6C757D\" />\n                    </svg>\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" \n                      [style.width.px]=\"field.imageSize?.width || 100\"\n                      [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\" (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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\"\n                [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n                [value]=\"field.value? field.value : ''\"\n                (input)=\"onTextAreaInput($event, field)\"\n                #autoTextarea\n                [style.height.px]=\"isPreview ? 40 : null\"\n                (click)=\"openTextSettings(field, $event)\"\n                (ngModelChange)=\"updateContent()\" \n                [ngStyle]=\"{\n                  'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n                  'font-weight': field.style?.bold ? 'bold' : 'normal',\n                  'font-style': field.style?.italics ? 'italic' : 'normal',\n                  'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n                  'text-align': field.style?.alignment || 'left',\n                  'margin': field.style?.margin?.length === 4\n                    ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n                      field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n                    : '0',\n                  'color': field.style?.color || '#000'\n                }\">\n                </textarea>\n            </div>\n          </div>\n\n          <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n          <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n            [ngStyle]=\"{\n              position: 'absolute',\n              background: '#fff',\n              border: '1px solid #ccc',\n              padding: '6px 10px',\n              'border-radius': '4px',\n              'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n              'z-index': '65535',\n              display: 'flex',\n              'align-items': 'center',\n              gap: '8px'\n            }\">\n        \n            <!-- Font Size -->\n            <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n              <option [value]=\"12\">12pt</option>\n              <option [value]=\"14\">14pt</option>\n              <option [value]=\"16\">16pt</option>\n              <option [value]=\"18\">18pt</option>\n              <option [value]=\"24\">24pt</option>\n            </select>\n\n            <!-- Text Color -->\n            <label title=\"Text Color\" class=\"color-label\">\n            <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n            <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n            </label>\n\n            <!-- Bold -->\n            <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ '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\n          \n            <!-- Align Left -->\n            <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n              <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | 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                          \n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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 app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\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                      'border-width': (field?.style?.lineWidth || 1) + 'px',\n                      'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                      'color': field?.style?.fontColor || '#000000',\n                      'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                      'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n                    }\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div>\n                          <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                              <img [src]=\"field.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                              <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n                         (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-14JUN25 Added nxt-input in pdf -->\n                  <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\"> \n                        <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n                          [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n                        </nxt-input>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!--  Table  -->\n        <!-- AP-06MAR25 -->\n        <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ '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          <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\n          <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n            <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.width\"\n              (input)=\"onImageSizeChange()\" />\n          \n            <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.height\"\n              (input)=\"onImageSizeChange()\" />\n          </div>\n          \n\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:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:15px;height:15px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.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:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { 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", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PdfDesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pdf-designer', standalone: true, imports: [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\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<!-- \n      <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div> -->\n\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>\n    <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n    <div class=\"form-preview\">\n      <!-- AP-10MAR25 Heading -->\n      <div 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=\"padding: 10px; display: flex;justify-content: space-between;\">\n          <div *ngIf=\"pdf\">\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\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n        </div>\n\n        <!--SKS25MAR25 Image Upload Element -->\n        <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [class.highlight]=\"selectedFieldIndex === i && !isPreview\" draggable=\"true && !isPreview\"\n          (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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 *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                        fill=\"#6C757D\" />\n                    </svg>\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" \n                      [style.width.px]=\"field.imageSize?.width || 100\"\n                      [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\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\"\n              [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n              [value]=\"field.value? field.value : ''\"\n              (input)=\"onTextAreaInput($event, field)\"\n              #autoTextarea\n              [style.height.px]=\"isPreview ? 40 : null\"\n              (click)=\"openTextSettings(field, $event)\"\n              (ngModelChange)=\"updateContent()\" \n              [ngStyle]=\"{\n                'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n                'font-weight': field.style?.bold ? 'bold' : 'normal',\n                'font-style': field.style?.italics ? 'italic' : 'normal',\n                'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n                'text-align': field.style?.alignment || 'left',\n                'margin': field.style?.margin?.length === 4\n                  ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n                    field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n                  : '0',\n                'color': field.style?.color || '#000'\n              }\"></textarea>\n            \n            </div>\n          </div>\n\n                           <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                           <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n                           [ngStyle]=\"{\n                             position: 'absolute',\n                             background: '#fff',\n                             border: '1px solid #ccc',\n                             padding: '6px 10px',\n                             'border-radius': '4px',\n                             'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                             'z-index': '65535',\n                             display: 'flex',\n                             'align-items': 'center',\n                             gap: '8px'\n                           }\">\n                         \n                           <!-- Font Size -->\n                           <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                             <option [value]=\"12\">12pt</option>\n                             <option [value]=\"14\">14pt</option>\n                             <option [value]=\"16\">16pt</option>\n                             <option [value]=\"18\">18pt</option>\n                             <option [value]=\"24\">24pt</option>\n                           </select>\n\n                          <!-- Text Color -->\n                          <label title=\"Text Color\" class=\"color-label\">\n                          <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                          <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                          </label>\n\n                           <!-- Bold -->\n                           <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ '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\n                         \n                           <!-- Align Left -->\n                           <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | 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                          \n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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 app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div>\n                          <div class=\"logo-container\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                              <img [src]=\"field.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                              <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n                         (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-14JUN25 Added nxt-input in pdf -->\n                  <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\"> \n                        <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n                          [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n                        </nxt-input>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!--  Table  -->\n        <!-- AP-06MAR25 -->\n        <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\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=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ '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          <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\n          <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n            <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.width\"\n              (input)=\"onImageSizeChange()\" />\n          \n            <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.height\"\n              (input)=\"onImageSizeChange()\" />\n          </div>\n          \n\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:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:15px;height:15px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.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:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{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}\n"] }]
+            args: [{ selector: 'app-pdf-designer', standalone: true, imports: [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      <!--  <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div> -->\n\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>\n    <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n    <div class=\"form-preview\">\n      <!-- AP-10MAR25 Heading -->\n      <div 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=\"padding: 10px; display: flex;justify-content: space-between;\">\n          <div *ngIf=\"pdf\">\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\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\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              'border-width': (field?.style?.lineWidth || 1) + 'px',\n              'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n              'color': field?.style?.fontColor || '#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\" (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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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 *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                        fill=\"#6C757D\" />\n                    </svg>\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" \n                      [style.width.px]=\"field.imageSize?.width || 100\"\n                      [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\" (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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\"\n                [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n                [value]=\"field.value? field.value : ''\"\n                (input)=\"onTextAreaInput($event, field)\"\n                #autoTextarea\n                [style.height.px]=\"isPreview ? 40 : null\"\n                (click)=\"openTextSettings(field, $event)\"\n                (ngModelChange)=\"updateContent()\" \n                [ngStyle]=\"{\n                  'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n                  'font-weight': field.style?.bold ? 'bold' : 'normal',\n                  'font-style': field.style?.italics ? 'italic' : 'normal',\n                  'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n                  'text-align': field.style?.alignment || 'left',\n                  'margin': field.style?.margin?.length === 4\n                    ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n                      field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n                    : '0',\n                  'color': field.style?.color || '#000'\n                }\">\n                </textarea>\n            </div>\n          </div>\n\n          <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n          <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n            [ngStyle]=\"{\n              position: 'absolute',\n              background: '#fff',\n              border: '1px solid #ccc',\n              padding: '6px 10px',\n              'border-radius': '4px',\n              'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n              'z-index': '65535',\n              display: 'flex',\n              'align-items': 'center',\n              gap: '8px'\n            }\">\n        \n            <!-- Font Size -->\n            <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n              <option [value]=\"12\">12pt</option>\n              <option [value]=\"14\">14pt</option>\n              <option [value]=\"16\">16pt</option>\n              <option [value]=\"18\">18pt</option>\n              <option [value]=\"24\">24pt</option>\n            </select>\n\n            <!-- Text Color -->\n            <label title=\"Text Color\" class=\"color-label\">\n            <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n            <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n            </label>\n\n            <!-- Bold -->\n            <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ '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\n          \n            <!-- Align Left -->\n            <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n              <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | 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                          \n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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 app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\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                      'border-width': (field?.style?.lineWidth || 1) + 'px',\n                      'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                      'color': field?.style?.fontColor || '#000000',\n                      'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                      'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n                    }\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div>\n                          <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                              <img [src]=\"field.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                              <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n                         (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-14JUN25 Added nxt-input in pdf -->\n                  <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\"> \n                        <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n                          [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n                        </nxt-input>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!--  Table  -->\n        <!-- AP-06MAR25 -->\n        <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\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            'border-width': (field?.style?.lineWidth || 1) + 'px',\n            'color': field?.style?.fontColor || '#000000',\n            'font-style': field?.style?.fontStyle,\n            'font-weight': field?.style?.fontWeight || '400',\n            'margin': \n              (field?.style?.margin?.[0] || 0) + 'px ' +\n              (field?.style?.margin?.[1] || 0) + 'px ' +\n              (field?.style?.margin?.[2] || 0) + 'px ' +\n              (field?.style?.margin?.[3] || 0) + 'px',\n            'padding-top': (field?.style?.paddingTop || 0) + 'px',\n            'padding-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\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=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ '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          <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\n          <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n            <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.width\"\n              (input)=\"onImageSizeChange()\" />\n          \n            <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.height\"\n              (input)=\"onImageSizeChange()\" />\n          </div>\n          \n\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:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:15px;height:15px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.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:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{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}\n"] }]
         }], ctorParameters: () => [{ type: PdfDesignerService }], propDecorators: { textareas: [{
                 type: ViewChildren,
                 args: ['autoTextarea']