@rangertechnologies/ngnxt 2.1.349 → 2.1.350

package/fesm2022/rangertechnologies-ngnxt.mjs

@@ -48502,7 +48502,7 @@ class nxtDropdown {
         }
         change['valueObj'] = value;
         change['field'] = changeField;
-        change['referenceField'] = this.apiMeta?.referenceField;
+        change['referenceField'] = this.question?.referenceField;
         this.valueChange.emit({ question: this.question, value: change });
         if (this.apiMeta?.isCurrencyField) {
             this.countryService.currencyCodeSet(change['valueObj']);
@@ -48542,7 +48542,7 @@ class nxtDropdown {
         this.valueChange.emit({ question: this.question, value: {
                 fromQuestionId: this.question?.id,
                 valueObj: '',
-                referenceField: this.apiMeta?.referenceField,
+                referenceField: this.question?.referenceField,
             } });
         if (this.apiMeta?.isCurrencyField) {
             this.countryService.currencyCodeSet('INR');
@@ -48567,7 +48567,7 @@ class nxtDropdown {
             change['fromQuestionId'] = this.question?.id;
             change['valueObj'] = value;
             change['field'] = changeField;
-            change['referenceField'] = this.apiMeta?.referenceField;
+            change['referenceField'] = this.question?.referenceField;
             this.valueChange.emit({ question: ques, value: change });
             if (this.apiMeta?.isCurrencyField) {
                 this.countryService.currencyCodeSet(change['valueObj']);
@@ -50658,8 +50658,8 @@ class NxtSearchBox {
                     }
                 });
                 const queryParams = queryParamsArray.join('&');
-                if (queryParams) {
-                    finalGetCall += this.apiMeta.endpoint.includes('?') ? `&${queryParams}` : `?${queryParams}`;
+                if (queryParams) { //SKS29MAY26 fallback check added for '?'
+                    finalGetCall += (this.apiMeta.endpoint.includes('?') || finalGetCall.includes('?')) ? `&${queryParams}` : `?${queryParams}`;
                 }
             }
             if (finalGetCall) {
@@ -59067,7 +59067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }] } });
 
-class BookletComponent {
+let BookletComponent$1 = class BookletComponent {
     dataService;
     changeService;
     http;
@@ -59733,8 +59733,8 @@ class BookletComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BookletComponent, deps: [{ token: DataService }, { token: ChangeService }, { token: i1$1.HttpClient }, { token: TranslationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: BookletComponent, isStandalone: true, selector: "lib-booklet", inputs: { bookletId: "bookletId", serv: "serv", tkn: "tkn", bookletJSON: "bookletJSON", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", dropdownDependentData: "dropdownDependentData", labelValue: "labelValue", token: "token", languageCode: "languageCode", fieldRestrictions: "fieldRestrictions", from: "from", apiUrl: "apiUrl", isEdit: "isEdit", direction: "direction", isLoading: "isLoading", onlyView: "onlyView", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent", formEditEvent: "formEditEvent" }, viewQueries: [{ propertyName: "questionbookComponent", first: true, predicate: ["questionbook"], descendants: true }, { propertyName: "stickyBar", first: true, predicate: ["stickyBar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet; trackBy: trackBooklet\" [dir]=\"direction\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <ng-container *ngFor=\"let ques of qb.subQuestions; trackBy: trackQuestion\">\n            <div class=\"questiondiv1\">\n                <!-- HA 17JAN24 - Is title is enabled so that based on the boolean div will be visible -->\n                <div *ngIf=\"ques.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText  }}\n                    </div>\n                </div>\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                <!-- AP-19MAY25 - Added [isEditVal] binding --> \n                <!-- //MSM10JUL25  allIcons, themeColor, cdnIconURL added for icon-selector-->\n                <lib-questionbook [qbItem]=\"qb\" [token]=\"token\"\n                    [direction] = \"direction\"\n                    [labelValue]=\"labelValue\"\n                    [questionItem]=\"ques\"\n                    [questions]=\"qb.questions\"\n                    (handleDropDown)=\"getDropDown($event)\"\n                    (handleCalendarDate)=\"getCalendarDate($event)\"\n                    (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                    (singleFieldChangeEmit) ='singleFieldChange($event)'\n                    [dataBind]=\"dataBind\"\n                    [isEdit]=\"isEditVal\" \n                    [allIcons]=\"allIcons\"\n                    [themeColor]=\"themeColor\"\n                    [cdnIconURL]=\"cdnIconURL\"\n                    [languageCode]=\"languageCode\"\n                    [onlyView]=\"onlyView\"\n                    >\n                </lib-questionbook>\n            </div>\n        </ng-container>\n    </div>\n    <!-- HA 28DEC23 Below else logic is to load from books or questions -->\n    <ng-template #elseBlock>\n        <div class=\"questiondiv1\">\n            <div>\n                <div *ngIf=\"!qb.isTitle\" [class]=\"qb.isShengel ? 'header-style' : 'question-f-size additional'\">\n                    <!-- VD 08NOV23 - showing label when its available-->\n                    <div *ngIf=\"qb?.questionText && qb?.style?.showLabel !== false\" >\n                        {{ (qb.id+'.questionText') | nxtCustomTranslate : qb?.questionText}}\n                        {{ qb?.title }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--  // VD 11Jun24 - translation changes-->\n                <lib-questionbook [onlyView]=\"onlyView\" [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"qb.questions\"  (handleDropDown)=\"getDropDown($event)\" [languageCode]=\"languageCode\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n    <!-- Group Actions -->\n    <!-- HA 19DEC23 For Direction -->\n    <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n    <div #stickyBar class=\"align-submit-row\" [ngStyle]=\"{\n        display: 'flex',\n        position: 'sticky',\n        bottom: '0px',\n        zIndex: '1000',\n        width: '100%',\n        justifyContent: 'flex-end',\n        background: '#ffffff',\n        padding: '10px',\n        gap: '10px',\n        boxShadow: showStickyShadow ? 'rgba(0, 0, 0, 0.12) 0px -10px 8px -10px' : 'none'\n      }\" *ngIf=\"abItem?.status != 'Completed' && from !== 'formBuilder' && !onlyView\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n        <ng-container  *ngFor=\"let action of actions; let i = index; trackBy: trackAction\">\n            <div class=\"action-wrapper\">  <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\"  removed in this tag -->\n                @if(!isEditVal && action.name === 'Save'){\n                    <nxt-button\n                        (buttonClickEmit)=\"editChangeClick(action)\"\n                        [buttonValue]=\"'EDIT' | nxtCustomTranslate : 'Edit'\"\n                        [btnBorder]=\"action.borderSize\"\n                        [btnBorderColor]=\"action.borderColor\"\n                        [btnBorderRadius]=\"action.borderRadius || 4\"\n                        [btnWidth]=\"action.width || 100\"\n                        [buttonType]=\"'custom-btn'\"\n                        [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n                        [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n                        >\n                    </nxt-button>\n                } @else if(action.name === 'Cancel' ? isEditVal : true ) {\n                    <nxt-button\n                        (buttonClickEmit)=\"handleBookletActionClick(action)\" \n                        [isLoading]=\"isLoading?.includes(action.id)\"\n                        [buttonValue]=\"(action.id+'.name') | nxtCustomTranslate : action?.name\"\n                        [btnBorder]=\"action.borderSize\"\n                        [btnBorderRadius]=\"action.borderRadius || 4\"\n                        [btnWidth]=\"action.width || 100\"\n                        [buttonType]=\"action.name === 'Cancel' ? 'border-btn' : 'custom-btn'\"\n                        [buttonConfig]=\"action?.buttonConfig\" [type]=\"action?.type\"\n                        [btnIconLeftSrc]=\"action?.btnIconLeftSrc\" [isImageSvg]=\"action?.isImageSvg\"\n                        [buttonDisable]=\"action.name === 'Save' && isSaveDisabled\"\n                        >\n                    </nxt-button>\n                }\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".header-style{padding:15px;background:#f8f8f8;color:#898989;border:1px solid #e8e8e8;border-top-left-radius:5px;border-top-right-radius:5px;margin-left:0;justify-content:left;font-size:15px}.rtl{flex-direction:row-reverse}.action-btn{width:100%;height:40px;transition:all .3s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind", "allIcons", "themeColor", "cdnIconURL", "direction", "languageCode", "from", "bgColor", "margin", "onlyView", "bookStyle"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnBorderRadius", "btnBorderColor", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode", "padding", "isLoading", "selector", "dropdownLoadingButton"], outputs: ["buttonClickEmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BookletComponent, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BookletComponent$1, decorators: [{
             type: Component,
             args: [{ selector: 'lib-booklet', standalone: true, imports: [
                         CommonModule,
@@ -59812,7 +59812,7 @@ const VERSION = {
     "semver": null,
     "suffix": "ed0865a9-dirty",
     "semverString": null,
-    "version": "2.1.349"
+    "version": "2.1.350"
 };
 /* tslint:enable */
 
@@ -60102,6 +60102,73 @@ class PdfDesignerService {
             this.pdfElementsSubject.next([...this.pdfElements]);
         }
     }
+    getDefaultPdfSettings() {
+        return {
+            pageSize: 'A4',
+            pageOrientation: 'portrait',
+            pageMargins: [40, 40, 40, 80],
+            backgroundColor: '#ffffff',
+            header: {
+                enabled: false,
+                showOn: 'all',
+                text: '',
+                leftText: '',
+                centerText: '',
+                rightText: '',
+                alignment: 'center',
+                fontSize: 9,
+                color: '#666666',
+                margin: [40, 20, 40, 0],
+                bottomBorder: false,
+                borderColor: '#2f9e44',
+                borderWidth: 1
+            },
+            watermark: {
+                enabled: false,
+                text: '',
+                color: '#9ca3af',
+                opacity: 0.16,
+                angle: -32,
+                fontSize: 64
+            },
+            footer: {
+                enabled: false,
+                showOn: 'last',
+                text: '',
+                leftText: '',
+                centerText: '',
+                rightText: '',
+                alignment: 'center',
+                fontSize: 9,
+                color: '#666666',
+                margin: [40, 12, 40, 0],
+                topBorder: false,
+                borderColor: '#2f9e44',
+                borderWidth: 1
+            }
+        };
+    }
+    ensurePdfSettings(pdf = this.pdf) {
+        if (!pdf)
+            return this.getDefaultPdfSettings();
+        pdf.pdfSettings = {
+            ...this.getDefaultPdfSettings(),
+            ...(pdf.pdfSettings || {}),
+            header: {
+                ...this.getDefaultPdfSettings().header,
+                ...(pdf.pdfSettings?.header || {})
+            },
+            watermark: {
+                ...this.getDefaultPdfSettings().watermark,
+                ...(pdf.pdfSettings?.watermark || {})
+            },
+            footer: {
+                ...this.getDefaultPdfSettings().footer,
+                ...(pdf.pdfSettings?.footer || {})
+            }
+        };
+        return pdf.pdfSettings;
+    }
     intializeBook(pdf) {
         //  - Get the unique id in the pdf 
         this.unique_id = Object.keys(pdf)[0];
@@ -60118,6 +60185,7 @@ class PdfDesignerService {
         });
         pdf[this.unique_id] = tempbook;
         this.pdf = pdf;
+        this.ensurePdfSettings();
         this.pdf[this.unique_id]?.forEach(element => {
             this.addElement(element);
         });
@@ -60141,6 +60209,7 @@ class PdfDesignerService {
         this.pdf = {
             [this.unique_id]: [],
             'title': 'Untitled',
+            'pdfSettings': this.getDefaultPdfSettings(),
         };
     }
     // AP 26FEB25 - clear the form elements 
@@ -60283,16 +60352,292 @@ class PdfDesignerService {
         return this.pdf;
     }
     downloadElement() {
-        const backgroundCanvas = [];
-        this.pdfElements.forEach(element => {
+        return this.buildPdfBook(this.pdf, this.pdfElements);
+    }
+    buildPdfOutput(pdfJSON, dataBind = {}, pdfDefinitionOptions = {}, action = 'definition', elements) {
+        const boundBook = this.buildBoundPdfBook(pdfJSON, dataBind, elements);
+        const pdfDefinition = this.createPdfDefinition(boundBook, pdfDefinitionOptions);
+        return {
+            action,
+            title: boundBook?.title || 'document',
+            pdf: boundBook,
+            book: boundBook,
+            boundBook,
+            pdfJson: boundBook?.pdfJson,
+            pdfDefinition,
+            dataBind
+        };
+    }
+    buildPdfOutputFromConfig(config) {
+        return this.buildPdfOutput(config?.pdfJSON, config?.dataBind || {}, config?.pdfDefinitionOptions || {}, config?.action || 'definition', config?.elements);
+    }
+    buildBoundPdfBook(pdfJSON = this.pdf, dataBind = {}, elements) {
+        const sourcePdf = this.clonePlain(pdfJSON || this.pdf || {});
+        sourcePdf.currencyCode = sourcePdf.currencyCode || dataBind?.currencyCode || dataBind?.customer?.currencyCode;
+        sourcePdf.currency = sourcePdf.currency || dataBind?.currency;
+        const uniqueId = this.getPdfUniqueId(sourcePdf);
+        const sourceElements = elements || (uniqueId ? sourcePdf[uniqueId] : []);
+        const boundElements = this.bindPdfElements(sourceElements, dataBind);
+        return this.buildPdfBook(sourcePdf, boundElements);
+    }
+    bindPdfElements(elements = [], dataBind = {}) {
+        const clonedElements = this.clonePlain(elements || []);
+        if (dataBind && Object.keys(dataBind).length > 0) {
+            clonedElements.forEach((question) => this.bindPdfQuestion(question, dataBind));
+        }
+        return clonedElements;
+    }
+    createPdfDefinition(boundBook, pdfDefinitionOptions = {}) {
+        const pdfJson = boundBook?.pdfJson || {};
+        const { defaultStyle, ...restOptions } = pdfDefinitionOptions || {};
+        const pdfDefinition = {
+            ...pdfJson,
+            ...restOptions,
+            content: Array.isArray(pdfJson.content) ? [...pdfJson.content] : [],
+            styles: { ...(pdfJson.styles || {}) },
+            defaultStyle: {
+                ...(pdfJson.defaultStyle || {}),
+                ...(defaultStyle || {})
+            }
+        };
+        this.removeUnavailableFonts(pdfDefinition);
+        this.replaceUnsupportedCurrencySymbols(pdfDefinition, boundBook, pdfDefinitionOptions);
+        return pdfDefinition;
+    }
+    bindPdfQuestion(ques, dataBind) {
+        if (!ques)
+            return;
+        this.normalizeBindableMetadata(ques);
+        const questionType = (ques.type || '').toString().toLowerCase();
+        const value = this.getBoundTemplateValue(ques.referenceTemplate || ques.bindingTemplate, dataBind)
+            ?? this.getBoundReferencePartsValue(ques.referenceParts || ques.referenceFields, dataBind)
+            ?? this.getBoundReferenceValue(ques.referenceField, ques.referenceJoiner, dataBind);
+        const hasValue = this.hasBindableValue(value);
+        if (questionType === 'pdf' && ques.pdfReferenceQuestions) {
+            ques.pdfReferenceQuestions = typeof ques.pdfReferenceQuestions === 'object'
+                ? ques.pdfReferenceQuestions
+                : this.parsePdfMakeJson(ques.pdfReferenceQuestions, {});
+            ques.pdfReferenceQuestions?.[ques.pdfReference]?.forEach((inQues) => {
+                this.bindPdfQuestion(inQues, dataBind);
+            });
+            return;
+        }
+        if (questionType === 'table') {
+            const rows = hasValue ? this.getBoundTableRows(value) : this.getBoundTableRows(ques.value);
+            const summaryValues = this.buildTableSummaryValues(ques, rows, dataBind);
+            if (hasValue || Object.keys(summaryValues).length > 0) {
+                ques.value = Object.keys(summaryValues).length > 0
+                    ? { data: rows, summaryValues, summaryValue: summaryValues }
+                    : { data: rows };
+            }
+            return;
+        }
+        if (hasValue) {
+            if (['dropdown', 'multiselect', 'radio'].includes(questionType)) {
+                ques.value = value;
+                ques.selectedValue = value;
+            }
+            else if (questionType === 'date' || questionType === 'datetime') {
+                const dateValue = new Date(value?.toString());
+                ques.value = Number.isNaN(dateValue.getTime()) ? value : dateValue;
+            }
+            else if (questionType === 'location') {
+                ques.value = value?.['address'] ? value['address'] : value;
+            }
+            else if (questionType === 'boolean') {
+                ques.value = value === true || value === 'true';
+            }
+            else if (questionType === 'image') {
+                ques.imageData = value || ques.imageData;
+            }
+            else {
+                ques.value = value;
+            }
+            return;
+        }
+        if (questionType === 'boolean') {
+            ques.value = typeof ques.value !== 'undefined' ? ques.value === true || ques.value === 'true' : false;
+        }
+        else {
+            ques.value = ques.value || null;
+        }
+    }
+    normalizeBindableMetadata(ques) {
+        if (ques.subText && typeof ques.subText === 'string') {
+            ques.subText = this.parsePdfMakeJson(ques.subText, {});
+        }
+        if (Array.isArray(ques.fieldsMeta)) {
+            ques.fieldsMeta.forEach((field) => {
+                if (field?.subText && typeof field.subText === 'string') {
+                    field.subText = this.parsePdfMakeJson(field.subText, {});
+                }
+            });
+        }
+    }
+    getBoundReferenceValue(referenceField, referenceJoiner = ' ', dataBind) {
+        if (!referenceField)
+            return undefined;
+        if (Array.isArray(referenceField)) {
+            return referenceField
+                .map((fieldPath) => this.dataService.getValue(dataBind, fieldPath))
+                .filter(value => this.hasBindableValue(value))
+                .join(referenceJoiner || ' ');
+        }
+        return this.dataService.getValue(dataBind, referenceField);
+    }
+    getBoundReferencePartsValue(referenceParts, dataBind) {
+        if (!Array.isArray(referenceParts) || referenceParts.length === 0)
+            return undefined;
+        let output = '';
+        referenceParts.forEach((part) => {
+            if (typeof part === 'string') {
+                const value = this.dataService.getValue(dataBind, part);
+                if (this.hasBindableValue(value)) {
+                    output += String(value);
+                }
+                return;
+            }
+            if (part?.text !== undefined) {
+                output += String(part.text);
+                return;
+            }
+            const fieldPath = part?.field || part?.referenceField || part?.path;
+            const value = this.getBoundReferenceValue(fieldPath, part?.referenceJoiner, dataBind);
+            if (!this.hasBindableValue(value)) {
+                if (part?.fallback !== undefined) {
+                    output += `${part.prefix || ''}${part.fallback}${part.suffix || part.after || ''}`;
+                }
+                return;
+            }
+            output += `${part.prefix || ''}${value}${part.suffix || part.after || ''}`;
+        });
+        return output
+            .replace(/[ \t]+\n/g, '\n')
+            .replace(/\n{3,}/g, '\n\n')
+            .trim();
+    }
+    getBoundTemplateValue(template, dataBind) {
+        if (!template || typeof template !== 'string')
+            return undefined;
+        return template.replace(/\{\{\s*([^}|]+?)(?:\s*\|\s*([^}]+?))?\s*\}\}/g, (_match, fieldPath, pipeName) => {
+            const value = this.dataService.getValue(dataBind, fieldPath.trim());
+            if (!this.hasBindableValue(value))
+                return '';
+            if ((pipeName || '').trim().toLowerCase() === 'date') {
+                return this.formatBoundDateValue(value);
+            }
+            return String(value);
+        });
+    }
+    formatBoundDateValue(value) {
+        const dateValue = new Date(value);
+        if (Number.isNaN(dateValue.getTime()))
+            return String(value);
+        return dateValue.toLocaleDateString('en-GB');
+    }
+    hasBindableValue(value) {
+        if (value === undefined || value === null)
+            return false;
+        if (typeof value === 'string')
+            return value.length > 0;
+        if (Array.isArray(value))
+            return value.length > 0;
+        return true;
+    }
+    getBoundTableRows(value) {
+        if (Array.isArray(value))
+            return value;
+        if (Array.isArray(value?.data))
+            return value.data;
+        return [];
+    }
+    buildTableSummaryValues(ques, rows, dataBind) {
+        const summaryValues = {};
+        const refs = ques.summaryValuesReferenceField;
+        const setSummaryValue = (apiName, referenceField) => {
+            if (!apiName || !referenceField)
+                return;
+            const value = this.dataService.getValue(dataBind, referenceField);
+            if (this.hasBindableValue(value)) {
+                summaryValues[apiName] = value;
+            }
+        };
+        if (Array.isArray(refs)) {
+            refs.forEach((ref) => {
+                if (typeof ref === 'string') {
+                    setSummaryValue(ref, ref);
+                }
+                else if (ref && typeof ref === 'object') {
+                    setSummaryValue(ref.apiName || ref.name || ref.key, ref.referenceField || ref.field || ref.path);
+                }
+            });
+        }
+        else if (typeof refs === 'string') {
+            setSummaryValue(refs, refs);
+        }
+        else if (refs && typeof refs === 'object') {
+            Object.keys(refs).forEach(apiName => setSummaryValue(apiName, refs[apiName]));
+        }
+        (ques.fieldsMeta || [])
+            .filter((column) => column?.summaryRow && column?.apiName && !this.hasBindableValue(summaryValues[column.apiName]))
+            .forEach((column) => {
+            const computedValue = this.computeTableSummaryValue(column, rows, summaryValues, dataBind);
+            if (this.hasBindableValue(computedValue)) {
+                summaryValues[column.apiName] = computedValue;
+            }
+        });
+        return summaryValues;
+    }
+    computeTableSummaryValue(column, rows, summaryValues, dataBind) {
+        const operation = (column?.operation || '').toString().toLowerCase();
+        if (operation === 'sum' && column?.column) {
+            return rows.reduce((total, row) => total + this.toNumericValue(this.dataService.getValue(row, column.column)), 0);
+        }
+        if (operation === 'subtract' && Array.isArray(column?.operands) && column.operands.length > 0) {
+            const [first, ...rest] = column.operands.map((operand) => this.resolveSummaryOperand(operand, rows, summaryValues, dataBind));
+            return rest.reduce((total, value) => total - value, first);
+        }
+        return undefined;
+    }
+    resolveSummaryOperand(operand, rows, summaryValues, dataBind) {
+        if (this.hasBindableValue(summaryValues?.[operand])) {
+            return this.toNumericValue(summaryValues[operand]);
+        }
+        const rootValue = this.dataService.getValue(dataBind, operand);
+        if (this.hasBindableValue(rootValue)) {
+            return this.toNumericValue(rootValue);
+        }
+        return rows.reduce((total, row) => total + this.toNumericValue(this.dataService.getValue(row, operand)), 0);
+    }
+    toNumericValue(value) {
+        if (typeof value === 'number')
+            return Number.isFinite(value) ? value : 0;
+        const numericValue = Number(String(value ?? '').replace(/[^0-9.-]/g, ''));
+        return Number.isFinite(numericValue) ? numericValue : 0;
+    }
+    getPdfUniqueId(pdfJSON) {
+        return Object.keys(pdfJSON || {}).find(key => Array.isArray(pdfJSON[key])) || this.unique_id || this.addElementWithId();
+    }
+    clonePlain(value) {
+        return JSON.parse(JSON.stringify(value ?? null));
+    }
+    buildPdfBook(pdf = this.pdf, elements = this.pdfElements) {
+        const originalUniqueId = this.unique_id;
+        const sourcePdf = pdf || this.pdf;
+        const clonedPdf = JSON.parse(JSON.stringify(sourcePdf || {}));
+        const uniqueId = Object.keys(clonedPdf).find(key => Array.isArray(clonedPdf[key])) || originalUniqueId || this.addElementWithId();
+        this.unique_id = uniqueId;
+        this.ensurePdfSettings(clonedPdf);
+        const clonedElements = JSON.parse(JSON.stringify(elements || []));
+        clonedElements.forEach(element => {
             if (element.subText && typeof element.subText === 'object') {
                 element.subText = element.subText;
             }
         });
-        this.pdf[this.unique_id] = this.pdfElements;
-        this.pdf['pdfJson'] = this.convertToPdfLayout(this.pdf);
+        clonedPdf[uniqueId] = clonedElements;
+        clonedPdf['pdfJson'] = this.convertToPdfLayout(clonedPdf);
         // Scale widths for columns
-        this.pdf?.pdfJson?.content?.forEach((row) => {
+        clonedPdf?.pdfJson?.content?.forEach((row) => {
             let canvasX = 0;
             let canvasY = 0;
             if (row?.table?.body && Array.isArray(row.table.body)) {
@@ -60339,25 +60684,144 @@ class PdfDesignerService {
                     if (typeof col.width === 'number' && col.width < 520) {
                         col.width = col.width * 5.2;
                         canvasY = col.image ? col.fit[1] : 0;
-                        backgroundCanvas.push({
-                            type: "rect",
-                            x: canvasX,
-                            y: col.image ? col.fit[1] : 0,
-                            w: col.width,
-                            h: col.image ? col.fit[1] : 140,
-                            color: "#ffffff",
-                            id: col.style
-                        });
                         canvasX = col.width;
                     }
                 });
             }
         });
-        this.pdf.pdfJson['background'] = () => ({ canvas: backgroundCanvas });
-        return this.pdf;
+        this.applyPdfPageSettings(clonedPdf.pdfJson, clonedPdf);
+        this.unique_id = originalUniqueId || uniqueId;
+        return clonedPdf;
+    }
+    applyPdfPageSettings(pdfJson, sourcePdf = this.pdf) {
+        if (!pdfJson)
+            return;
+        const settings = this.ensurePdfSettings(sourcePdf);
+        pdfJson.pageSize = settings.pageSize || 'A4';
+        pdfJson.pageOrientation = settings.pageOrientation || 'portrait';
+        pdfJson.pageMargins = this.normalizeMargin(settings.pageMargins || [40, 40, 40, 80]);
+        const backgroundColor = settings.backgroundColor || '#ffffff';
+        pdfJson.background = (_currentPage, pageSize) => ({
+            canvas: [{
+                    type: 'rect',
+                    x: 0,
+                    y: 0,
+                    w: pageSize.width,
+                    h: pageSize.height,
+                    color: backgroundColor
+                }]
+        });
+        if (settings.watermark?.enabled && settings.watermark?.text) {
+            pdfJson.watermark = {
+                text: settings.watermark.text,
+                color: settings.watermark.color || '#9ca3af',
+                opacity: Number(settings.watermark.opacity ?? 0.16),
+                angle: Number(settings.watermark.angle ?? -32),
+                fontSize: Number(settings.watermark.fontSize ?? 64)
+            };
+        }
+        else if (pdfJson.watermark) {
+            delete pdfJson.watermark;
+        }
+        if (settings.header?.enabled && this.hasRunningBandContent(settings.header)) {
+            pdfJson.header = (currentPage, pageCount, pageSize) => {
+                if (settings.header.showOn === 'first' && currentPage !== 1) {
+                    return '';
+                }
+                if (settings.header.showOn === 'notFirst' && currentPage === 1) {
+                    return '';
+                }
+                if (settings.header.content) {
+                    return settings.header.content;
+                }
+                return this.buildRunningBand(settings.header, currentPage, pageCount, pageSize, 'header');
+            };
+        }
+        else if (pdfJson.header) {
+            delete pdfJson.header;
+        }
+        if (settings.footer?.enabled && this.hasRunningBandContent(settings.footer)) {
+            pdfJson.footer = (currentPage, pageCount, pageSize) => {
+                if (settings.footer.showOn === 'last' && currentPage !== pageCount) {
+                    return '';
+                }
+                if (settings.footer.content) {
+                    return settings.footer.content;
+                }
+                return this.buildRunningBand(settings.footer, currentPage, pageCount, pageSize, 'footer');
+            };
+        }
+        else if (pdfJson.footer) {
+            delete pdfJson.footer;
+        }
+    }
+    hasRunningBandContent(settings) {
+        return !!(settings?.content || settings?.text || settings?.leftText || settings?.centerText || settings?.rightText);
+    }
+    buildRunningBand(settings, currentPage, pageCount, pageSize, placement) {
+        const margin = this.normalizeMargin(settings.margin || [40, 12, 40, 0]);
+        const lineWidth = Math.max((pageSize?.width || 595) - margin[0] - margin[2], 0);
+        const stack = [];
+        if (placement === 'footer' && settings.topBorder) {
+            stack.push({
+                canvas: [{
+                        type: 'line',
+                        x1: 0,
+                        y1: 0,
+                        x2: lineWidth,
+                        y2: 0,
+                        lineWidth: Number(settings.borderWidth ?? 1),
+                        lineColor: settings.borderColor || '#2f9e44'
+                    }],
+                margin: [0, 0, 0, 8]
+            });
+        }
+        const leftText = this.replacePageTokens(settings.leftText || settings.text || '', currentPage, pageCount);
+        const centerText = this.replacePageTokens(settings.centerText || '', currentPage, pageCount);
+        const rightText = this.replacePageTokens(settings.rightText || '', currentPage, pageCount);
+        if (settings.leftText || settings.centerText || settings.rightText) {
+            stack.push({
+                columns: [
+                    { width: '*', text: leftText, alignment: 'left' },
+                    { width: '*', text: centerText, alignment: 'center' },
+                    { width: '*', text: rightText, alignment: 'right' }
+                ],
+                columnGap: 12,
+                fontSize: Number(settings.fontSize ?? 9),
+                color: settings.color || '#666666'
+            });
+        }
+        else {
+            stack.push({
+                text: this.replacePageTokens(settings.text || '', currentPage, pageCount),
+                alignment: settings.alignment || 'center',
+                fontSize: Number(settings.fontSize ?? 9),
+                color: settings.color || '#666666'
+            });
+        }
+        if (placement === 'header' && settings.bottomBorder) {
+            stack.push({
+                canvas: [{
+                        type: 'line',
+                        x1: 0,
+                        y1: 0,
+                        x2: lineWidth,
+                        y2: 0,
+                        lineWidth: Number(settings.borderWidth ?? 1),
+                        lineColor: settings.borderColor || '#2f9e44'
+                    }],
+                margin: [0, 8, 0, 0]
+            });
+        }
+        return { margin, stack };
+    }
+    replacePageTokens(text, currentPage, pageCount) {
+        return String(text || '')
+            .replace(/\{\{\s*currentPage\s*\}\}/g, String(currentPage))
+            .replace(/\{\{\s*pageCount\s*\}\}/g, String(pageCount));
     }
     convertToPdfLayout(input) {
-        this.currencyOption = this.countryService.getCurrentCurrency();
+        this.currencyOption = this.resolveCurrencyOption(input);
         const result = { content: [] };
         const items = JSON.parse(JSON.stringify(input[this.unique_id]));
         const processItems = (items, from, fromWidth) => {
@@ -60429,6 +60893,32 @@ class PdfDesignerService {
                 if (item.type === 'date') {
                     item.value = this.dateTransform(item.value, 'date', 'en', 'gregorian');
                 }
+                if (item.type === 'PageBreak' && item.hideInPdf !== true) {
+                    if (currentRow.columns.length > 0) {
+                        const arrayCheck = currentRow.columns.some(col => Array.isArray(col) && col.some(col2 => Array.isArray(col2.columns)));
+                        rows.push(arrayCheck ? { 'table': { 'body': [currentRow.columns] }, layout: 'noBorders' } : currentRow);
+                        currentRow = { columns: [] };
+                        currentWidth = 0;
+                    }
+                    rows.push({ text: '', pageBreak: item.pageBreak || 'after' });
+                    continue;
+                }
+                if (item.type === 'PdfMake' && item.hideInPdf !== true) {
+                    if (currentRow.columns.length > 0) {
+                        const arrayCheck = currentRow.columns.some(col => Array.isArray(col) && col.some(col2 => Array.isArray(col2.columns)));
+                        rows.push(arrayCheck ? { 'table': { 'body': [currentRow.columns] }, layout: 'noBorders' } : currentRow);
+                        currentRow = { columns: [] };
+                        currentWidth = 0;
+                    }
+                    const rawContent = this.parsePdfMakeJson(item.pdfMakeContent || item.value, null);
+                    if (Array.isArray(rawContent)) {
+                        rows.push(...rawContent);
+                    }
+                    else if (rawContent) {
+                        rows.push(rawContent);
+                    }
+                    continue;
+                }
                 if (item.type === "Space" || item.hideInPdf === true) {
                     currentRow.columns.push({ width: fromWidth || width, text: '' });
                 }
@@ -60446,6 +60936,54 @@ class PdfDesignerService {
                     ];
                     currentRow.columns.push(element);
                 }
+                else if (item.type === 'Section') {
+                    element = {
+                        width: fromWidth || width,
+                        table: {
+                            widths: ['*'],
+                            body: [[{
+                                        text: item.value || item.questionText || 'Section',
+                                        style: item.styleClass,
+                                        fillColor: item.style?.fillColor || item.style?.backgroundColor || '#2f9e44',
+                                        border: [false, false, false, false],
+                                        margin: this.normalizeMargin(item.innerMargin || [8, 6, 8, 6])
+                                    }]]
+                        },
+                        layout: 'noBorders',
+                        margin: this.normalizeMargin(item.style?.margin || [0, 8, 0, 0])
+                    };
+                    currentRow.columns.push(element);
+                }
+                else if (item.type === 'Note') {
+                    element = {
+                        width: fromWidth || width,
+                        table: {
+                            widths: ['*'],
+                            body: [[{
+                                        text: item.value || '',
+                                        style: item.styleClass,
+                                        fillColor: item.style?.fillColor || item.style?.backgroundColor || '#e7f2e8',
+                                        borderColor: item.style?.borderColor || '#2f9e44',
+                                        margin: this.normalizeMargin(item.innerMargin || [8, 6, 8, 6])
+                                    }]]
+                        },
+                        layout: {
+                            hLineColor: () => item.style?.borderColor || '#2f9e44',
+                            vLineColor: () => item.style?.borderColor || '#2f9e44'
+                        },
+                        margin: this.normalizeMargin(item.style?.margin || [0, 8, 0, 8])
+                    };
+                    currentRow.columns.push(element);
+                }
+                else if (item.type === 'RichText') {
+                    element = {
+                        width: fromWidth || width,
+                        stack: this.buildRichTextStack(item),
+                        style: item.styleClass,
+                        margin: this.normalizeMargin(item.style?.margin || [0, 6, 0, 6])
+                    };
+                    currentRow.columns.push(element);
+                }
                 else if (item.type === "Pdf" && item.pdfReferenceQuestions) {
                     const nestedQuestions = item.pdfReferenceQuestions[item.pdfReference];
                     const nestedContent = processItems(nestedQuestions, 'pdf', item.width); // recursive processing
@@ -60471,47 +61009,59 @@ class PdfDesignerService {
                         text: col.label, style: col.uniqueIdentifier
                     })));
                     // Table data
-                    item?.value?.data?.forEach?.(tableData => {
+                    const dataRows = item.tableConfig?.hideEmptyRows === false
+                        ? (item?.value?.data || [])
+                        : (item?.value?.data || []).filter((tableData) => !this.isEmptyTableDataRow(tableData, mainColumns));
+                    dataRows.forEach?.(tableData => {
                         body?.push(mainColumns?.map((col) => {
                             if (col.fldType === 'currency') {
+                                const cellValue = this.dataService.getValue(tableData, col.apiName);
                                 return {
-                                    text: this.dataService.getValue(tableData, col.apiName) ? this.currencyOption.symbol + " " + this.dataService.getValue(tableData, col.apiName) : '',
-                                    fontSize: 12,
+                                    text: this.formatCurrencyText(cellValue, col),
+                                    fontSize: Number(col.style?.fontSize) || 12,
                                     nowrap: false,
-                                    alignment: 'right',
+                                    alignment: col.style?.alignment || 'right',
                                     style: col.uniqueIdentifier + 'column'
                                 };
                             }
                             else {
                                 return {
                                     text: this.dataService.getValue(tableData, col.apiName) || '',
-                                    fontSize: 12,
+                                    fontSize: Number(col.style?.fontSize) || 12,
                                     nowrap: false,
+                                    alignment: col.style?.alignment || undefined,
                                     style: col.uniqueIdentifier + 'column'
                                 };
                             }
                         }));
                     });
                     // Summary rows
+                    const summaryValues = item?.value?.summaryValues || item?.value?.summaryValue || {};
                     summaryRow.forEach((col) => {
                         //AP-14JUN25 - Create an empty row with same number of columns as main table, filled with blank cells (no borders)
                         const row = new Array(mainColumns.length).fill({ text: '', "border": [false, false, false, false] });
                         //AP-14JUN25 - Set the label text at the left summary position with bottom-side border
-                        row[summaryRowPosition - 1] = { text: col.label, "border": [false, false, false, false], style: col.uniqueIdentifier };
-                        row[summaryRowPosition] = { text: col.fldType === 'currency' && this.dataService.getValue(item?.value?.summaryValues, col.apiName) ? this.currencyOption.symbol + " " + this.dataService.getValue(item?.value?.summaryValues, col.apiName) : this.dataService.getValue(item?.value?.summaryValues, col.apiName) || '', "border": [false, false, false, false], style: col.uniqueIdentifier };
+                        const valueIndex = Math.min(Math.max(summaryRowPosition, 1), Math.max(mainColumns.length - 1, 0));
+                        const labelIndex = Math.max(valueIndex - 1, 0);
+                        row[labelIndex] = { text: col.label, "border": [false, false, false, false], style: col.uniqueIdentifier };
+                        const summaryValue = this.dataService.getValue(summaryValues, col.apiName);
+                        row[valueIndex] = { text: col.fldType === 'currency' ? this.formatCurrencyText(summaryValue, col) : summaryValue ?? '', "border": [false, false, false, false], style: col.uniqueIdentifier };
                         body.push(row);
                     });
                     // table column widths
                     let tableColumnWidths = [];
                     mainColumns.forEach((mCol) => {
-                        tableColumnWidths.push(typeof mCol.style?.width === 'number' && mCol.style?.width < 520 ? mCol.style?.width * 5.2 : '*');
+                        const columnWidth = mCol.style?.width;
+                        tableColumnWidths.push(typeof columnWidth === 'number' ? columnWidth : columnWidth || '*');
                     });
                     element = {
                         width: item.width || 520,
                         table: {
                             body,
-                            widths: tableColumnWidths
+                            widths: tableColumnWidths,
+                            dontBreakRows: item.tableConfig?.dontBreakRows === true
                         },
+                        layout: this.buildTableLayout(item.tableLayout)
                     };
                     currentRow.columns.push(element);
                     // AP-24JUNE 25 - Adjust image width to compensate for external *5.2 scaling
@@ -60562,7 +61112,7 @@ class PdfDesignerService {
                                 },
                                 {
                                     width: fromWidth || width,
-                                    text: val ? this.currencyOption.symbol + " " + val : '',
+                                    text: this.formatCurrencyText(val, item),
                                     style: item.styleClass
                                 }
                             ]
@@ -60571,12 +61121,13 @@ class PdfDesignerService {
                     else {
                         currentRow.columns.push({
                             width: fromWidth || width,
-                            text: val, style: item.styleClass,
+                            text: this.formatCurrencyText(val, item), style: item.styleClass,
                         });
                     }
                 }
                 else {
                     const val = item.value || '';
+                    const valueNode = this.buildTextValueNode(item, val, fromWidth || width);
                     if (item.showLabelInPdf === true) {
                         currentRow.columns.push({
                             width: fromWidth || width,
@@ -60588,18 +61139,12 @@ class PdfDesignerService {
                                     text: item.questionText || '',
                                     style: item.styleClass + 'label'
                                 },
-                                {
-                                    width: fromWidth || width,
-                                    text: val, style: item.styleClass,
-                                }
+                                valueNode
                             ]
                         });
                     }
                     else {
-                        currentRow.columns.push({
-                            width: fromWidth || width,
-                            text: val, style: item.styleClass,
-                        });
+                        currentRow.columns.push(valueNode);
                     }
                 }
                 currentWidth += width;
@@ -60629,28 +61174,42 @@ class PdfDesignerService {
                             if (field?.style?.margin) {
                                 field.style.margin = field.style.margin.map(Number);
                             }
-                            styleJson[field.uniqueIdentifier] = field.style;
+                            styleJson[field.uniqueIdentifier] = this.normalizePdfStyle(field.style);
                             let tempStyle = field.style ? JSON.parse(JSON.stringify(field.style)) : {};
                             delete tempStyle.fillColor;
-                            delete tempStyle.color;
-                            styleJson[field.uniqueIdentifier + 'column'] = tempStyle;
+                            if (tempStyle.cellColor) {
+                                tempStyle.color = tempStyle.cellColor;
+                            }
+                            else {
+                                delete tempStyle.color;
+                            }
+                            if (tempStyle.cellFillColor) {
+                                tempStyle.fillColor = tempStyle.cellFillColor;
+                            }
+                            styleJson[field.uniqueIdentifier + 'column'] = this.normalizePdfStyle(tempStyle);
                         }
                     }
                 }
+                if (item.type === 'PdfMake') {
+                    Object.assign(styleJson, this.parsePdfMakeJson(item.pdfMakeStyles, {}));
+                    continue;
+                }
                 if (item?.style?.margin) {
                     item.style.margin = item.style.margin.map(Number);
                 }
                 if (item.showLabelInPdf === true) {
                     // Deep copy so original item.style is safe
                     let tempStyle1 = item.style ? JSON.parse(JSON.stringify(item.style)) : {};
+                    tempStyle1.margin = this.normalizeMargin(tempStyle1.margin || [0, 0, 0, 2]);
                     tempStyle1.margin[3] = 2;
-                    styleJson[item.styleClass + "label"] = tempStyle1;
+                    styleJson[item.styleClass + "label"] = this.normalizePdfStyle(tempStyle1);
                     let tempStyle2 = item.style ? JSON.parse(JSON.stringify(item.style)) : {};
+                    tempStyle2.margin = this.normalizeMargin(tempStyle2.margin || [0, 0, 0, 0]);
                     tempStyle2.margin[1] = 0;
-                    styleJson[item.styleClass] = tempStyle2;
+                    styleJson[item.styleClass] = this.normalizePdfStyle(tempStyle2);
                 }
                 else {
-                    styleJson[item.styleClass] = item.style;
+                    styleJson[item.styleClass] = this.normalizePdfStyle(item.style);
                 }
                 // Recursive step for Pdf
                 if (item.type === "Pdf" && item.pdfReferenceQuestions) {
@@ -60670,6 +61229,258 @@ class PdfDesignerService {
         result['styles'] = styleJson;
         return result;
     }
+    buildTableLayout(tableLayout) {
+        if (!tableLayout)
+            return undefined;
+        if (typeof tableLayout === 'string')
+            return tableLayout;
+        const hLineColor = tableLayout.hLineColor || tableLayout.lineColor || '#cfd8d1';
+        const vLineColor = tableLayout.vLineColor || tableLayout.lineColor || '#cfd8d1';
+        const hLineWidth = tableLayout.hLineWidth ?? tableLayout.lineWidth ?? 0.5;
+        const vLineWidth = tableLayout.vLineWidth ?? tableLayout.lineWidth ?? 0.5;
+        const paddingLeft = tableLayout.paddingLeft ?? tableLayout.paddingX ?? 5;
+        const paddingRight = tableLayout.paddingRight ?? tableLayout.paddingX ?? 5;
+        const paddingTop = tableLayout.paddingTop ?? tableLayout.paddingY ?? 4;
+        const paddingBottom = tableLayout.paddingBottom ?? tableLayout.paddingY ?? 4;
+        return {
+            hLineColor: () => hLineColor,
+            vLineColor: () => vLineColor,
+            hLineWidth: () => Number(hLineWidth),
+            vLineWidth: () => Number(vLineWidth),
+            paddingLeft: () => Number(paddingLeft),
+            paddingRight: () => Number(paddingRight),
+            paddingTop: () => Number(paddingTop),
+            paddingBottom: () => Number(paddingBottom)
+        };
+    }
+    isEmptyTableDataRow(tableData, columns = []) {
+        if (!tableData || typeof tableData !== 'object')
+            return true;
+        return !(columns || []).some((column) => {
+            const value = this.normalizeCurrencyValue(this.dataService.getValue(tableData, column.apiName));
+            if (!this.hasBindableValue(value))
+                return false;
+            if (typeof value === 'number')
+                return value !== 0;
+            const text = String(value).trim();
+            if (!text)
+                return false;
+            if (column?.fldType === 'currency' && this.toNumericValue(text) === 0)
+                return false;
+            return true;
+        });
+    }
+    buildRichTextStack(item) {
+        const style = item?.style || {};
+        const paragraphGap = Number(style.paragraphGap ?? 1);
+        const paragraphBottom = Number(style.paragraphBottom ?? 1);
+        const headingBottom = Number(style.headingBottom ?? 5);
+        const bulletTop = Number(style.bulletTop ?? 2);
+        const bulletBottom = Number(style.bulletBottom ?? 5);
+        const lines = String(item.value || '')
+            .split(/\r?\n/)
+            .map(line => line.trim())
+            .filter(Boolean);
+        const stack = [];
+        let bulletBuffer = [];
+        const flushBullets = () => {
+            if (!bulletBuffer.length)
+                return;
+            stack.push({
+                ul: bulletBuffer,
+                margin: [0, stack.length ? bulletTop : 0, 0, bulletBottom]
+            });
+            bulletBuffer = [];
+        };
+        lines.forEach((line, index) => {
+            const bulletMatch = line.match(/^([•*-])\s*(.*)$/);
+            if (bulletMatch) {
+                bulletBuffer.push(bulletMatch[2]);
+                return;
+            }
+            flushBullets();
+            stack.push({
+                text: line,
+                bold: item.headingFirstLine !== false && index === 0,
+                color: item.headingFirstLine !== false && index === 0 ? (item.style?.headingColor || item.style?.color || '#2f9e44') : undefined,
+                margin: [
+                    0,
+                    stack.length ? paragraphGap : 0,
+                    0,
+                    item.headingFirstLine !== false && index === 0 ? headingBottom : paragraphBottom
+                ]
+            });
+        });
+        flushBullets();
+        return stack.length ? stack : [{ text: '' }];
+    }
+    buildTextValueNode(item, value, width) {
+        if (item?.type !== 'text' || (item?.headingFirstLine !== true && !this.isQuotationHeadingText(item))) {
+            return {
+                width,
+                text: value,
+                style: item.styleClass
+            };
+        }
+        return {
+            width,
+            stack: this.buildStyledTextStack(item, value),
+            margin: this.normalizeMargin(item.style?.margin || [0, 0, 0, 0])
+        };
+    }
+    buildStyledTextStack(item, value) {
+        const style = item?.style || {};
+        const bodyStyle = this.normalizePdfStyle({
+            ...style,
+            margin: [0, 0, 0, 0]
+        });
+        const lines = String(value || '').split(/\r?\n/);
+        return lines.map((line, index) => {
+            if (index === 0 && String(line || '').trim()) {
+                return {
+                    ...bodyStyle,
+                    text: line,
+                    color: style.headingColor || this.getDefaultTextHeadingColor(item) || style.color || '#2f9e44',
+                    fontSize: Number(style.headingFontSize) || this.getDefaultTextHeadingSize(item) || Number(style.fontSize) || 12,
+                    bold: style.headingBold === undefined ? !this.isQuotationHeadingText(item) : style.headingBold !== false,
+                    margin: this.normalizeMargin(style.headingMargin || [0, 0, 0, 2])
+                };
+            }
+            if (!line) {
+                return {
+                    text: ' ',
+                    fontSize: Number(style.blankLineHeight) || 10,
+                    margin: [0, 0, 0, 0]
+                };
+            }
+            return {
+                ...bodyStyle,
+                text: line
+            };
+        });
+    }
+    isQuotationHeadingText(item) {
+        const firstLine = String(item?.value || '').split(/\r?\n/)[0]?.trim();
+        return firstLine === 'VALAR HR' || firstLine === 'QUOTATION';
+    }
+    getDefaultTextHeadingColor(item) {
+        return this.isQuotationHeadingText(item) ? '#3fa34d' : '';
+    }
+    getDefaultTextHeadingSize(item) {
+        return this.isQuotationHeadingText(item) ? 24 : 0;
+    }
+    parsePdfMakeJson(value, fallback) {
+        if (!value)
+            return fallback;
+        if (typeof value === 'object')
+            return value;
+        try {
+            return JSON.parse(value);
+        }
+        catch (error) {
+            console.warn('Invalid pdfmake JSON block ignored', error);
+            return fallback;
+        }
+    }
+    formatCurrencyText(value, field) {
+        value = this.normalizeCurrencyValue(value);
+        if (value === undefined || value === null || value === '')
+            return '';
+        const symbol = this.resolveCurrencySymbol(field);
+        return `${symbol ? symbol + ' ' : ''}${value}`;
+    }
+    normalizeCurrencyValue(value) {
+        if (!value || typeof value !== 'object')
+            return value;
+        const scalarValue = value.value ?? value.amount ?? value.total ?? value.totalAmount ?? value.taxAmount;
+        if (scalarValue !== undefined && scalarValue !== null && typeof scalarValue !== 'object') {
+            return scalarValue;
+        }
+        if (Array.isArray(value.group)) {
+            return value.group.reduce((total, entry) => {
+                return total + this.toNumericValue(entry?.value ?? entry?.amount ?? entry?.taxAmount ?? entry?.total);
+            }, 0);
+        }
+        return '';
+    }
+    resolveCurrencySymbol(field) {
+        if (field && Object.prototype.hasOwnProperty.call(field, 'currencySymbol')) {
+            return field.currencySymbol || '';
+        }
+        return this.currencyOption?.symbol || this.currencyOption?.currencySymbol || '';
+    }
+    resolveCurrencyOption(source) {
+        const configuredCurrency = source?.currency || source?.pdfSettings?.currency;
+        if (configuredCurrency?.symbol || configuredCurrency?.currencySymbol) {
+            return {
+                code: configuredCurrency.code || configuredCurrency.currencyCode,
+                name: configuredCurrency.name || configuredCurrency.currencyName,
+                symbol: configuredCurrency.symbol || configuredCurrency.currencySymbol
+            };
+        }
+        const currencyCode = source?.currencyCode || source?.pdfSettings?.currencyCode || source?.customer?.currencyCode;
+        if (currencyCode) {
+            const currencyOption = this.countryService.getCountryData(['currencies'])?.find((option) => option.code === currencyCode);
+            if (currencyOption)
+                return currencyOption;
+        }
+        return this.countryService.getCurrentCurrency();
+    }
+    removeUnavailableFonts(pdfDefinition) {
+        const availableFonts = new Set([
+            ...Object.keys(pdfDefinition?.fonts || {}),
+            ...(pdfDefinition?.defaultStyle?.font ? [pdfDefinition.defaultStyle.font] : [])
+        ]);
+        if (availableFonts.size === 0)
+            return;
+        const sanitize = (node) => {
+            if (!node || typeof node !== 'object')
+                return;
+            if (Array.isArray(node)) {
+                node.forEach(sanitize);
+                return;
+            }
+            if (node.font && !availableFonts.has(node.font)) {
+                delete node.font;
+            }
+            Object.keys(node).forEach(key => {
+                if (typeof node[key] !== 'function') {
+                    sanitize(node[key]);
+                }
+            });
+        };
+        sanitize(pdfDefinition.styles);
+        sanitize(pdfDefinition.content);
+    }
+    replaceUnsupportedCurrencySymbols(pdfDefinition, boundBook, pdfDefinitionOptions = {}) {
+        if (pdfDefinitionOptions?.preserveCurrencySymbol === true)
+            return;
+        const defaultFont = pdfDefinition?.defaultStyle?.font;
+        const shouldReplaceRupee = defaultFont === 'Amiri';
+        if (!shouldReplaceRupee)
+            return;
+        const replacement = pdfDefinitionOptions?.currencySymbolFallback
+            || boundBook?.currency?.code
+            || boundBook?.currencyCode
+            || 'INR';
+        const sanitize = (node) => {
+            if (!node || typeof node !== 'object')
+                return;
+            if (Array.isArray(node)) {
+                node.forEach(sanitize);
+                return;
+            }
+            if (typeof node.text === 'string') {
+                node.text = node.text.replace(/₹/g, replacement);
+            }
+            Object.keys(node).forEach(key => {
+                if (typeof node[key] !== 'function') {
+                    sanitize(node[key]);
+                }
+            });
+        };
+        sanitize(pdfDefinition.content);
+    }
     // AP-06MAR25 - Element new order update
     updateElementsOrder(updatedElements) {
         this.pdfElements = [...updatedElements];
@@ -60745,6 +61556,64 @@ class PdfDesignerService {
         const easternArabicNumerals = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
         return input.replace(/\d/g, d => easternArabicNumerals[+d]);
     }
+    normalizeMargin(margin) {
+        const fallback = [0, 0, 0, 0];
+        if (!Array.isArray(margin))
+            return fallback;
+        return [0, 1, 2, 3].map(index => Number(margin[index]) || 0);
+    }
+    normalizePdfStyle(style = {}) {
+        const normalized = JSON.parse(JSON.stringify(style || {}));
+        if (normalized.fontSize !== undefined) {
+            normalized.fontSize = Number(normalized.fontSize) || 12;
+        }
+        if (normalized.lineHeight !== undefined) {
+            normalized.lineHeight = Number(normalized.lineHeight) || 1;
+        }
+        if (normalized.characterSpacing !== undefined) {
+            normalized.characterSpacing = Number(normalized.characterSpacing) || 0;
+        }
+        if (normalized.opacity !== undefined) {
+            normalized.opacity = Number(normalized.opacity);
+        }
+        if (normalized.margin) {
+            normalized.margin = this.normalizeMargin(normalized.margin);
+        }
+        if (normalized.fontWeight !== undefined && normalized.bold === undefined) {
+            normalized.bold = Number(normalized.fontWeight) >= 600;
+        }
+        if (normalized.fontStyle === 'bold') {
+            normalized.bold = true;
+        }
+        if (normalized.fontStyle === 'italic') {
+            normalized.italics = true;
+        }
+        if (normalized.italic !== undefined && normalized.italics === undefined) {
+            normalized.italics = !!normalized.italic;
+        }
+        if (normalized.fillColor && !normalized.background) {
+            normalized.background = normalized.fillColor;
+        }
+        if (normalized.backgroundColor && !normalized.background) {
+            normalized.background = normalized.backgroundColor;
+        }
+        delete normalized.italic;
+        delete normalized.fontWeight;
+        delete normalized.fontStyle;
+        delete normalized.backgroundColor;
+        delete normalized.cellColor;
+        delete normalized.cellFillColor;
+        delete normalized.labelColor;
+        delete normalized.labelFontSize;
+        delete normalized.labelBold;
+        delete normalized.headingColor;
+        delete normalized.headingFontSize;
+        delete normalized.headingBold;
+        delete normalized.headingMargin;
+        delete normalized.blankLineHeight;
+        delete normalized.borderColor;
+        return normalized;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PdfDesignerService, deps: [{ token: CountryService }, { token: i1$1.HttpClient }, { token: DataService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PdfDesignerService, providedIn: 'root' });
 }
@@ -61361,13 +62230,119 @@ class PdfPropertiesComponent {
                 }
             ]
         },
-        'Pdf': {
+        'Section': {
             elementProps: [
                 { label: 'Element', labelPath: 'ELEMENT', type: 'number', key: 'questionNumber' },
-                { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText', isTranslate: true, labelPath: 'HELP_TEXT' },
+                { label: 'Section Text', placeholder: 'Section Title', type: 'text', key: 'value' },
                 { label: 'width', labelPath: 'WIDTH', type: 'fieldSize', key: 'width' },
                 { label: 'Hide In Pdf', labelPath: 'HIDEINPDF', type: 'checkbox', key: 'hideInPdf' },
-                { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText', isTranslate: true, labelPath: 'LABEL' },
+            ],
+            fieldProps: [
+                { label: 'Reference Field', labelPath: 'REFERENCEFIELD', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
+                this.subtext
+            ],
+            appearance: [
+                { label: 'Font Color', labelPath: 'color', type: 'color', key: 'style.color', value: '' },
+                { label: 'Background Color', type: 'color', key: 'style.fillColor', value: '' },
+                { label: 'Font Size', labelPath: 'FONTSIZE', type: 'number', key: 'style.fontSize', value: 12 },
+                {
+                    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' },
+                        { value: '600', label: '600-Semi Bold', labelPath: 'FONTWEIGHT_SEMIBOLD' },
+                        { value: '700', label: '700-Bold', labelPath: 'FONTWEIGHT_BOLD' }
+                    ]
+                },
+                { 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: 'style.alignment', value: '',
+                    options: [
+                        { label: 'Left', labelPath: 'ALIGNITEM_LEFT', value: 'left' },
+                        { label: 'Center', labelPath: 'ALIGNITEM_CENTER', value: 'center' },
+                        { label: 'Right', labelPath: 'ALIGNITEM_RIGHT', value: 'right' }
+                    ]
+                }
+            ]
+        },
+        'RichText': {
+            elementProps: [
+                { label: 'Element', labelPath: 'ELEMENT', type: 'number', key: 'questionNumber' },
+                { label: 'width', labelPath: 'WIDTH', type: 'fieldSize', key: 'width' },
+                { label: 'Hide In Pdf', labelPath: 'HIDEINPDF', type: 'checkbox', key: 'hideInPdf' },
+            ],
+            fieldProps: [
+                { label: 'Content', labelPath: 'VALUE', placeholder: 'Use one line for heading and lines starting with •, -, or * for bullets', type: 'textarea', key: 'value' },
+                { label: 'Reference Field', labelPath: 'REFERENCEFIELD', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
+                this.subtext
+            ],
+            appearance: [
+                { label: 'Font Color', labelPath: 'color', type: 'color', key: 'style.color', value: '' },
+                { label: 'Heading Color', type: 'color', key: 'style.headingColor', value: '' },
+                { label: 'Font Size', labelPath: 'FONTSIZE', type: 'number', key: 'style.fontSize', value: 12 },
+                { 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: 'style.alignment', value: '',
+                    options: [
+                        { label: 'Left', labelPath: 'ALIGNITEM_LEFT', value: 'left' },
+                        { label: 'Center', labelPath: 'ALIGNITEM_CENTER', value: 'center' },
+                        { label: 'Right', labelPath: 'ALIGNITEM_RIGHT', value: 'right' }
+                    ]
+                }
+            ]
+        },
+        'Note': {
+            elementProps: [
+                { label: 'Element', labelPath: 'ELEMENT', type: 'number', key: 'questionNumber' },
+                { label: 'Note Text', placeholder: 'Enter note', type: 'textarea', key: 'value' },
+                { label: 'width', labelPath: 'WIDTH', type: 'fieldSize', key: 'width' },
+                { label: 'Hide In Pdf', labelPath: 'HIDEINPDF', type: 'checkbox', key: 'hideInPdf' },
+            ],
+            fieldProps: [
+                { label: 'Reference Field', labelPath: 'REFERENCEFIELD', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
+                this.subtext
+            ],
+            appearance: [
+                { label: 'Font Color', labelPath: 'color', type: 'color', key: 'style.color', value: '' },
+                { label: 'Background Color', type: 'color', key: 'style.fillColor', value: '' },
+                { label: 'Border Color', type: 'color', key: 'style.borderColor', value: '' },
+                { label: 'Font Size', labelPath: 'FONTSIZE', type: 'number', key: 'style.fontSize', value: 12 },
+                { label: 'Margin', labelPath: 'MARGIN', type: 'marginPicker', key: 'style.margin', placeholder: 'Left, Top, Right, Bottom', value: [0, 0, 0, 0] },
+            ]
+        },
+        'PageBreak': {
+            elementProps: [
+                { label: 'Element', labelPath: 'ELEMENT', type: 'number', key: 'questionNumber' },
+                {
+                    label: 'Break Position', type: 'select', key: 'pageBreak', value: 'after',
+                    options: [
+                        { label: 'After This Point', value: 'after' },
+                        { label: 'Before This Point', value: 'before' }
+                    ]
+                },
+                { label: 'Hide In Pdf', labelPath: 'HIDEINPDF', type: 'checkbox', key: 'hideInPdf' }
+            ],
+            fieldProps: [],
+            appearance: []
+        },
+        'PdfMake': {
+            elementProps: [
+                { label: 'Element', labelPath: 'ELEMENT', type: 'number', key: 'questionNumber' },
+                { label: 'Hide In Pdf', labelPath: 'HIDEINPDF', type: 'checkbox', key: 'hideInPdf' }
+            ],
+            fieldProps: [
+                { label: 'Content JSON', placeholder: '{ \"text\": \"Hello\" }', type: 'textarea', key: 'pdfMakeContent' },
+                { label: 'Styles JSON', placeholder: '{ \"myStyle\": { \"fontSize\": 12 } }', type: 'textarea', key: 'pdfMakeStyles' }
+            ],
+            appearance: []
+        },
+        'Pdf': {
+            elementProps: [
+                { label: 'Element', labelPath: 'ELEMENT', type: 'number', key: 'questionNumber' },
+                { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText', isTranslate: true, labelPath: 'HELP_TEXT' },
+                { label: 'width', labelPath: 'WIDTH', type: 'fieldSize', key: 'width' },
+                { label: 'Hide In Pdf', labelPath: 'HIDEINPDF', type: 'checkbox', key: 'hideInPdf' },
+                { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText', isTranslate: true, labelPath: 'LABEL' },
                 { label: 'Show Label In Pdf', labelPath: 'SHOW_LABEL_IN_PDF', type: 'checkbox', key: 'showLabelInPdf' },
             ],
             fieldProps: [
@@ -61950,6 +62925,154 @@ class PdfPropertiesComponent {
     updateTitle(event) {
         this.pdfDesignerService.updateTitle(event);
     }
+    getPdfSettings() {
+        this.pdf = this.pdfDesignerService.getBook();
+        if (!this.pdf)
+            return {};
+        if (!this.pdf.pdfSettings) {
+            this.pdf.pdfSettings = this.pdfDesignerService.getDefaultPdfSettings();
+        }
+        return this.pdf.pdfSettings;
+    }
+    getPdfSetting(path, fallback = '') {
+        const settings = this.getPdfSettings();
+        const value = path.split('.').reduce((obj, key) => obj?.[key], settings);
+        return value === undefined || value === null ? fallback : value;
+    }
+    setPdfSetting(path, value) {
+        const settings = this.getPdfSettings();
+        const keys = path.split('.');
+        let obj = settings;
+        keys.forEach((key, index) => {
+            if (index === keys.length - 1) {
+                obj[key] = this.normalizePdfSettingValue(path, value);
+            }
+            else {
+                obj[key] = obj[key] || {};
+                obj = obj[key];
+            }
+        });
+    }
+    onPdfSettingInput(path, event) {
+        const input = event.target;
+        this.setPdfSetting(path, input.type === 'checkbox' ? input.checked : input.value);
+    }
+    getStyleBuilderTitle() {
+        if (this.selectedElement?.type === 'Table' && this.selectColumn) {
+            const column = this.getSelectedTableColumn();
+            return `Table Column Style${column?.label ? ': ' + column.label : ''}`;
+        }
+        return `${this.selectedElement?.type || 'Element'} Style Builder`;
+    }
+    getActiveStyleValue(path, fallback = '') {
+        const style = this.getActiveStyleTarget(false);
+        const value = path.split('.').reduce((obj, key) => obj?.[key], style);
+        return value === undefined || value === null || value === '' ? fallback : value;
+    }
+    onActiveStyleInput(path, event) {
+        const input = event.target;
+        const rawValue = input.type === 'checkbox' ? input.checked : input.value;
+        this.setActiveStyleValue(path, this.normalizeStyleInputValue(path, rawValue));
+    }
+    setActiveStyleValue(path, value) {
+        const style = this.getActiveStyleTarget(true);
+        if (!style)
+            return;
+        const keys = path.split('.');
+        let obj = style;
+        keys.forEach((key, index) => {
+            if (index === keys.length - 1) {
+                obj[key] = value;
+            }
+            else {
+                obj[key] = obj[key] || {};
+                obj = obj[key];
+            }
+        });
+        if (path === 'fontWeight') {
+            style.bold = Number(value) >= 600;
+        }
+        if (path === 'bold' && value === true && !style.fontWeight) {
+            style.fontWeight = '700';
+        }
+        this.updateElement(this.selectedElement);
+    }
+    getActiveMargin(index) {
+        return this.normalizeStyleMargin(this.getActiveStyleValue('margin', [0, 0, 0, 0]))[index];
+    }
+    onActiveMarginInput(index, event) {
+        const input = event.target;
+        const margin = this.normalizeStyleMargin(this.getActiveStyleValue('margin', [0, 0, 0, 0]));
+        margin[index] = Number(input.value) || 0;
+        this.setActiveStyleValue('margin', margin);
+    }
+    getElementArrayValue(path, index, fallback = 0) {
+        const value = this.getValueByPath(path);
+        return Array.isArray(value) && value[index] !== undefined ? Number(value[index]) || 0 : fallback;
+    }
+    onElementArrayInput(path, index, event) {
+        const input = event.target;
+        const value = Array.isArray(this.getValueByPath(path)) ? [...this.getValueByPath(path)] : [0, 0, 0, 0];
+        value[index] = Number(input.value) || 0;
+        this.setValueByPath(path, value);
+    }
+    getActiveColumnWidthMode() {
+        const width = this.getActiveStyleValue('width', '*');
+        if (width === '*' || width === 'auto')
+            return width;
+        return 'custom';
+    }
+    onActiveColumnWidthModeChange(event) {
+        const value = event.target.value;
+        if (value === 'custom') {
+            const currentWidth = this.getActiveStyleValue('width', 80);
+            this.setActiveStyleValue('width', currentWidth === '*' || currentWidth === 'auto' ? 80 : currentWidth);
+            return;
+        }
+        this.setActiveStyleValue('width', value);
+    }
+    getActiveStyleTarget(create = true) {
+        if (this.selectedElement?.type === 'Table' && this.selectColumn) {
+            const column = this.getSelectedTableColumn();
+            if (!column)
+                return null;
+            if (create && !column.style)
+                column.style = {};
+            return column.style || {};
+        }
+        if (!this.selectedElement)
+            return null;
+        if (create && !this.selectedElement.style)
+            this.selectedElement.style = {};
+        return this.selectedElement.style || {};
+    }
+    getSelectedTableColumn() {
+        if (!this.selectedElement?.fieldsMeta || !this.selectColumn)
+            return null;
+        return this.selectedElement.fieldsMeta.find(column => column.uniqueIdentifier === this.selectColumn);
+    }
+    normalizeStyleInputValue(path, value) {
+        const numericPaths = ['fontSize', 'headingFontSize', 'blankLineHeight', 'lineHeight', 'characterSpacing', 'labelFontSize', 'opacity', 'width'];
+        if (numericPaths.includes(path)) {
+            return Number(value);
+        }
+        return value;
+    }
+    normalizeStyleMargin(value) {
+        if (!Array.isArray(value))
+            return [0, 0, 0, 0];
+        return [0, 1, 2, 3].map(index => Number(value[index]) || 0);
+    }
+    normalizePdfSettingValue(path, value) {
+        const numberPaths = ['watermark.opacity', 'watermark.angle', 'watermark.fontSize', 'header.fontSize', 'header.borderWidth', 'footer.fontSize', 'footer.borderWidth'];
+        if (numberPaths.includes(path)) {
+            return Number(value);
+        }
+        if (path.startsWith('pageMargins.') || path.startsWith('header.margin.') || path.startsWith('footer.margin.')) {
+            return Number(value) || 0;
+        }
+        return value;
+    }
     updatePdfpData() {
         // SKS28MAR25 Convert array to comma-separated string
         this.fieldAsString = this.bookSubtext?.field?.join(', ') || '';
@@ -62390,11 +63513,11 @@ class PdfPropertiesComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", 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.17", 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  <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        <div style=\"height: 200px;\">\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>\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=\"\"></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            <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 *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.type === 'fieldSize'\" [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)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom') : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' ) ) : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' )\">\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.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== '*' && selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== 'auto'\"\n              type=\"number\"\n              class=\"size-input\"\n              min=\"1\"\n              max=\"100\"\n              [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.valueAsNumber < 1 ? 1 :\n              $event.target.valueAsNumber > 100 ? 100 :\n              $event.target.valueAsNumber) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n              $event.target.valueAsNumber > 100 ? 100 :\n              $event.target.valueAsNumber) ) : setValueByPath(prop.key, $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          <!-- SKS16SEP25 formula  -->\n          <div *ngIf=\"prop.type === 'formula'\">\n            <app-formula-input\n              [attributes]=\"selectedElement['fieldsMeta']\"\n              [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n              (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n            </app-formula-input>\n          </div>\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>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]=\"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                  <!--  Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" 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)\" (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                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (change)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.checked) ) : 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          <!-- SKS16SEP25 formula  -->\n          <div *ngIf=\"prop.type === 'formula'\">\n            <app-formula-input\n              [attributes]=\"selectedElement['fieldsMeta']\"\n              [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n              (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n            </app-formula-input>\n          </div>\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            <!-- SKS16SEP25 formula  -->\n            <div *ngIf=\"prop.type === 'formula'\">\n              <app-formula-input\n                [attributes]=\"selectedElement['fieldsMeta']\"\n                [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n                (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n              </app-formula-input>\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=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n    <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</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:5px;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}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff;margin-right:10px}.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;width:35px;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", "onlyView", "rowData"], 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" }, { kind: "component", type: FormulaInputComponent, selector: "app-formula-input", inputs: ["attributes", "initialFormula"], outputs: ["formulaChange", "formulaValidation"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", 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  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <div *ngIf=\"headerSelect\" class=\"document-settings\">\n      <div class=\"document-settings-title\">Document Canvas</div>\n      <div class=\"form-group\">\n        <label>Page Size</label>\n        <select [value]=\"getPdfSetting('pageSize', 'A4')\" (change)=\"onPdfSettingInput('pageSize', $event)\">\n          <option value=\"A4\">A4</option>\n          <option value=\"LETTER\">Letter</option>\n          <option value=\"LEGAL\">Legal</option>\n        </select>\n      </div>\n      <div class=\"form-group\">\n        <label>Orientation</label>\n        <select [value]=\"getPdfSetting('pageOrientation', 'portrait')\" (change)=\"onPdfSettingInput('pageOrientation', $event)\">\n          <option value=\"portrait\">Portrait</option>\n          <option value=\"landscape\">Landscape</option>\n        </select>\n      </div>\n      <div class=\"form-group\">\n        <label>Background Color</label>\n        <div class=\"document-color-row\">\n          <input type=\"color\" [value]=\"getPdfSetting('backgroundColor', '#ffffff')\" (change)=\"onPdfSettingInput('backgroundColor', $event)\" />\n          <input type=\"text\" [value]=\"getPdfSetting('backgroundColor', '#ffffff')\" (change)=\"onPdfSettingInput('backgroundColor', $event)\" />\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label>Page Margins</label>\n        <div class=\"margin-inputs\">\n          <div><label>Left</label><input type=\"number\" [value]=\"getPdfSetting('pageMargins.0', 40)\" (change)=\"onPdfSettingInput('pageMargins.0', $event)\" /></div>\n          <div><label>Top</label><input type=\"number\" [value]=\"getPdfSetting('pageMargins.1', 40)\" (change)=\"onPdfSettingInput('pageMargins.1', $event)\" /></div>\n          <div><label>Right</label><input type=\"number\" [value]=\"getPdfSetting('pageMargins.2', 40)\" (change)=\"onPdfSettingInput('pageMargins.2', $event)\" /></div>\n          <div><label>Bottom</label><input type=\"number\" [value]=\"getPdfSetting('pageMargins.3', 80)\" (change)=\"onPdfSettingInput('pageMargins.3', $event)\" /></div>\n        </div>\n      </div>\n      <div class=\"form-group document-toggle\">\n        <label>\n          <input type=\"checkbox\" [checked]=\"getPdfSetting('header.enabled', false)\" (change)=\"onPdfSettingInput('header.enabled', $event)\" />\n          Running Header\n        </label>\n      </div>\n      <div *ngIf=\"getPdfSetting('header.enabled', false)\" class=\"document-subpanel\">\n        <div class=\"form-group\">\n          <label>Show Header</label>\n          <select [value]=\"getPdfSetting('header.showOn', 'all')\" (change)=\"onPdfSettingInput('header.showOn', $event)\">\n            <option value=\"all\">All Pages</option>\n            <option value=\"first\">First Page Only</option>\n            <option value=\"notFirst\">Skip First Page</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Header Left</label>\n          <input type=\"text\" [value]=\"getPdfSetting('header.leftText', '')\" (input)=\"onPdfSettingInput('header.leftText', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Header Center</label>\n          <input type=\"text\" [value]=\"getPdfSetting('header.centerText', '')\" (input)=\"onPdfSettingInput('header.centerText', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Header Right</label>\n          <input type=\"text\" [value]=\"getPdfSetting('header.rightText', '')\" (input)=\"onPdfSettingInput('header.rightText', $event)\" />\n        </div>\n        <div class=\"form-group document-toggle\">\n          <label>\n            <input type=\"checkbox\" [checked]=\"getPdfSetting('header.bottomBorder', false)\" (change)=\"onPdfSettingInput('header.bottomBorder', $event)\" />\n            Bottom Line\n          </label>\n        </div>\n        <div class=\"form-group\">\n          <label>Header Line Color</label>\n          <input type=\"color\" [value]=\"getPdfSetting('header.borderColor', '#2f9e44')\" (change)=\"onPdfSettingInput('header.borderColor', $event)\" />\n        </div>\n      </div>\n      <div class=\"form-group document-toggle\">\n        <label>\n          <input type=\"checkbox\" [checked]=\"getPdfSetting('watermark.enabled', false)\" (change)=\"onPdfSettingInput('watermark.enabled', $event)\" />\n          Watermark\n        </label>\n      </div>\n      <div *ngIf=\"getPdfSetting('watermark.enabled', false)\" class=\"document-subpanel\">\n        <div class=\"form-group\">\n          <label>Watermark Text</label>\n          <input type=\"text\" [value]=\"getPdfSetting('watermark.text', '')\" (input)=\"onPdfSettingInput('watermark.text', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Watermark Color</label>\n          <input type=\"color\" [value]=\"getPdfSetting('watermark.color', '#9ca3af')\" (change)=\"onPdfSettingInput('watermark.color', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Opacity</label>\n          <input type=\"number\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"getPdfSetting('watermark.opacity', 0.16)\" (change)=\"onPdfSettingInput('watermark.opacity', $event)\" />\n        </div>\n      </div>\n      <div class=\"form-group document-toggle\">\n        <label>\n          <input type=\"checkbox\" [checked]=\"getPdfSetting('footer.enabled', false)\" (change)=\"onPdfSettingInput('footer.enabled', $event)\" />\n          Footer\n        </label>\n      </div>\n      <div *ngIf=\"getPdfSetting('footer.enabled', false)\" class=\"document-subpanel\">\n        <div class=\"form-group\">\n          <label>Show Footer</label>\n          <select [value]=\"getPdfSetting('footer.showOn', 'last')\" (change)=\"onPdfSettingInput('footer.showOn', $event)\">\n            <option value=\"last\">Last Page Only</option>\n            <option value=\"all\">All Pages</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Footer Content</label>\n          <input type=\"text\" [value]=\"getPdfSetting('footer.text', '')\" (input)=\"onPdfSettingInput('footer.text', $event)\" />\n        </div>\n        <div class=\"document-help\">Use {{'{{currentPage}}'}} and {{'{{pageCount}}'}} for page numbers.</div>\n        <div class=\"form-group\">\n          <label>Footer Left</label>\n          <input type=\"text\" [value]=\"getPdfSetting('footer.leftText', '')\" (input)=\"onPdfSettingInput('footer.leftText', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Footer Center</label>\n          <input type=\"text\" [value]=\"getPdfSetting('footer.centerText', '')\" (input)=\"onPdfSettingInput('footer.centerText', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Footer Right</label>\n          <input type=\"text\" [value]=\"getPdfSetting('footer.rightText', '')\" (input)=\"onPdfSettingInput('footer.rightText', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Alignment</label>\n          <select [value]=\"getPdfSetting('footer.alignment', 'center')\" (change)=\"onPdfSettingInput('footer.alignment', $event)\">\n            <option value=\"left\">Left</option>\n            <option value=\"center\">Center</option>\n            <option value=\"right\">Right</option>\n          </select>\n        </div>\n        <div class=\"form-group document-toggle\">\n          <label>\n            <input type=\"checkbox\" [checked]=\"getPdfSetting('footer.topBorder', false)\" (change)=\"onPdfSettingInput('footer.topBorder', $event)\" />\n            Top Line\n          </label>\n        </div>\n        <div class=\"form-group\">\n          <label>Footer Line Color</label>\n          <input type=\"color\" [value]=\"getPdfSetting('footer.borderColor', '#2f9e44')\" (change)=\"onPdfSettingInput('footer.borderColor', $event)\" />\n        </div>\n      </div>\n    </div>\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        <div style=\"height: 200px;\">\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>\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          <textarea *ngIf=\"prop.type === 'textarea'\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n            (input)=\"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          </textarea>\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=\"\"></option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label  }} </option>\n          </select>\n\n          <select *ngIf=\"prop.type === 'select' && prop.key !== 'supportType' && prop.key !== 'lineStyle'\" [value]=\"getValueByPath(prop.key)\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\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            <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 *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.type === 'fieldSize'\" [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)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom') : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' ) ) : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' )\">\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.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== '*' && selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== 'auto'\"\n              type=\"number\"\n              class=\"size-input\"\n              min=\"1\"\n              max=\"100\"\n              [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.valueAsNumber < 1 ? 1 :\n              $event.target.valueAsNumber > 100 ? 100 :\n              $event.target.valueAsNumber) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n              $event.target.valueAsNumber > 100 ? 100 :\n              $event.target.valueAsNumber) ) : setValueByPath(prop.key, $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          <!-- SKS16SEP25 formula  -->\n          <div *ngIf=\"prop.type === 'formula'\">\n            <app-formula-input\n              [attributes]=\"selectedElement['fieldsMeta']\"\n              [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n              (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n            </app-formula-input>\n          </div>\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>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          <textarea *ngIf=\"prop.type === 'textarea'\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n            (input)=\"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          </textarea>\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]=\"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                  <!--  Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" 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)\" (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                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (change)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.checked) ) : 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          <!-- SKS16SEP25 formula  -->\n          <div *ngIf=\"prop.type === 'formula'\">\n            <app-formula-input\n              [attributes]=\"selectedElement['fieldsMeta']\"\n              [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n              (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n            </app-formula-input>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <!-- SKS26MAY26 builder stype tool -->\n    <div *ngIf=\"headerSelect\" class=\"style-builder\">\n      <div class=\"style-builder-title\">Document Style Builder</div>\n      <div class=\"style-section-title\">Page</div>\n      <div class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Page Size</label>\n          <select [value]=\"getPdfSetting('pageSize', 'A4')\" (change)=\"onPdfSettingInput('pageSize', $event)\">\n            <option value=\"A4\">A4</option>\n            <option value=\"LETTER\">Letter</option>\n            <option value=\"LEGAL\">Legal</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Orientation</label>\n          <select [value]=\"getPdfSetting('pageOrientation', 'portrait')\" (change)=\"onPdfSettingInput('pageOrientation', $event)\">\n            <option value=\"portrait\">Portrait</option>\n            <option value=\"landscape\">Landscape</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label>Background</label>\n        <div class=\"style-color-row\">\n          <input type=\"color\" [value]=\"getPdfSetting('backgroundColor', '#ffffff')\" (change)=\"onPdfSettingInput('backgroundColor', $event)\" />\n          <input type=\"text\" [value]=\"getPdfSetting('backgroundColor', '#ffffff')\" (change)=\"onPdfSettingInput('backgroundColor', $event)\" />\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label>Page Margins</label>\n        <div class=\"style-four-grid\">\n          <div><span>Left</span><input type=\"number\" [value]=\"getPdfSetting('pageMargins.0', 40)\" (change)=\"onPdfSettingInput('pageMargins.0', $event)\" /></div>\n          <div><span>Top</span><input type=\"number\" [value]=\"getPdfSetting('pageMargins.1', 40)\" (change)=\"onPdfSettingInput('pageMargins.1', $event)\" /></div>\n          <div><span>Right</span><input type=\"number\" [value]=\"getPdfSetting('pageMargins.2', 40)\" (change)=\"onPdfSettingInput('pageMargins.2', $event)\" /></div>\n          <div><span>Bottom</span><input type=\"number\" [value]=\"getPdfSetting('pageMargins.3', 80)\" (change)=\"onPdfSettingInput('pageMargins.3', $event)\" /></div>\n        </div>\n      </div>\n\n      <div class=\"style-section-title\">Running Header</div>\n      <label class=\"style-check-row\">\n        <input type=\"checkbox\" [checked]=\"getPdfSetting('header.enabled', false)\" (change)=\"onPdfSettingInput('header.enabled', $event)\" />\n        <span>Enable header</span>\n      </label>\n      <div *ngIf=\"getPdfSetting('header.enabled', false)\" class=\"style-nested\">\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Show On</label>\n            <select [value]=\"getPdfSetting('header.showOn', 'all')\" (change)=\"onPdfSettingInput('header.showOn', $event)\">\n              <option value=\"all\">All Pages</option>\n              <option value=\"first\">First Page Only</option>\n              <option value=\"notFirst\">Skip First Page</option>\n            </select>\n          </div>\n          <div class=\"form-group\">\n            <label>Font Size</label>\n            <input type=\"number\" min=\"1\" [value]=\"getPdfSetting('header.fontSize', 9)\" (change)=\"onPdfSettingInput('header.fontSize', $event)\" />\n          </div>\n        </div>\n        <div class=\"form-group\">\n          <label>Color</label>\n          <div class=\"style-color-row\">\n            <input type=\"color\" [value]=\"getPdfSetting('header.color', '#666666')\" (change)=\"onPdfSettingInput('header.color', $event)\" />\n            <input type=\"text\" [value]=\"getPdfSetting('header.color', '#666666')\" (change)=\"onPdfSettingInput('header.color', $event)\" />\n          </div>\n        </div>\n        <div class=\"style-grid\">\n          <div class=\"form-group\"><label>Left</label><input type=\"text\" [value]=\"getPdfSetting('header.leftText', '')\" (input)=\"onPdfSettingInput('header.leftText', $event)\" /></div>\n          <div class=\"form-group\"><label>Center</label><input type=\"text\" [value]=\"getPdfSetting('header.centerText', '')\" (input)=\"onPdfSettingInput('header.centerText', $event)\" /></div>\n          <div class=\"form-group\"><label>Right</label><input type=\"text\" [value]=\"getPdfSetting('header.rightText', '')\" (input)=\"onPdfSettingInput('header.rightText', $event)\" /></div>\n        </div>\n        <div class=\"form-group\">\n          <label>Header Margins</label>\n          <div class=\"style-four-grid\">\n            <div><span>Left</span><input type=\"number\" [value]=\"getPdfSetting('header.margin.0', 40)\" (change)=\"onPdfSettingInput('header.margin.0', $event)\" /></div>\n            <div><span>Top</span><input type=\"number\" [value]=\"getPdfSetting('header.margin.1', 20)\" (change)=\"onPdfSettingInput('header.margin.1', $event)\" /></div>\n            <div><span>Right</span><input type=\"number\" [value]=\"getPdfSetting('header.margin.2', 40)\" (change)=\"onPdfSettingInput('header.margin.2', $event)\" /></div>\n            <div><span>Bottom</span><input type=\"number\" [value]=\"getPdfSetting('header.margin.3', 0)\" (change)=\"onPdfSettingInput('header.margin.3', $event)\" /></div>\n          </div>\n        </div>\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"getPdfSetting('header.bottomBorder', false)\" (change)=\"onPdfSettingInput('header.bottomBorder', $event)\" />\n          <span>Bottom line</span>\n        </label>\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Line Color</label>\n            <input type=\"color\" [value]=\"getPdfSetting('header.borderColor', '#2f9e44')\" (change)=\"onPdfSettingInput('header.borderColor', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Line Width</label>\n            <input type=\"number\" min=\"0\" [value]=\"getPdfSetting('header.borderWidth', 1)\" (change)=\"onPdfSettingInput('header.borderWidth', $event)\" />\n          </div>\n        </div>\n      </div>\n\n      <div class=\"style-section-title\">Watermark</div>\n      <label class=\"style-check-row\">\n        <input type=\"checkbox\" [checked]=\"getPdfSetting('watermark.enabled', false)\" (change)=\"onPdfSettingInput('watermark.enabled', $event)\" />\n        <span>Enable watermark</span>\n      </label>\n      <div *ngIf=\"getPdfSetting('watermark.enabled', false)\" class=\"style-nested\">\n        <div class=\"form-group\">\n          <label>Text</label>\n          <input type=\"text\" [value]=\"getPdfSetting('watermark.text', '')\" (input)=\"onPdfSettingInput('watermark.text', $event)\" />\n        </div>\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Color</label>\n            <input type=\"color\" [value]=\"getPdfSetting('watermark.color', '#9ca3af')\" (change)=\"onPdfSettingInput('watermark.color', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Opacity</label>\n            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"getPdfSetting('watermark.opacity', 0.16)\" (change)=\"onPdfSettingInput('watermark.opacity', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Font Size</label>\n            <input type=\"number\" min=\"1\" [value]=\"getPdfSetting('watermark.fontSize', 64)\" (change)=\"onPdfSettingInput('watermark.fontSize', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Angle</label>\n            <input type=\"number\" [value]=\"getPdfSetting('watermark.angle', -32)\" (change)=\"onPdfSettingInput('watermark.angle', $event)\" />\n          </div>\n        </div>\n      </div>\n\n      <div class=\"style-section-title\">Footer</div>\n      <label class=\"style-check-row\">\n        <input type=\"checkbox\" [checked]=\"getPdfSetting('footer.enabled', false)\" (change)=\"onPdfSettingInput('footer.enabled', $event)\" />\n        <span>Enable footer</span>\n      </label>\n      <div *ngIf=\"getPdfSetting('footer.enabled', false)\" class=\"style-nested\">\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Show On</label>\n            <select [value]=\"getPdfSetting('footer.showOn', 'last')\" (change)=\"onPdfSettingInput('footer.showOn', $event)\">\n              <option value=\"last\">Last Page Only</option>\n              <option value=\"all\">All Pages</option>\n            </select>\n          </div>\n          <div class=\"form-group\">\n            <label>Alignment</label>\n            <select [value]=\"getPdfSetting('footer.alignment', 'center')\" (change)=\"onPdfSettingInput('footer.alignment', $event)\">\n              <option value=\"left\">Left</option>\n              <option value=\"center\">Center</option>\n              <option value=\"right\">Right</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"style-grid\">\n          <div class=\"form-group\"><label>Left</label><input type=\"text\" [value]=\"getPdfSetting('footer.leftText', '')\" (input)=\"onPdfSettingInput('footer.leftText', $event)\" /></div>\n          <div class=\"form-group\"><label>Center</label><input type=\"text\" [value]=\"getPdfSetting('footer.centerText', '')\" (input)=\"onPdfSettingInput('footer.centerText', $event)\" /></div>\n          <div class=\"form-group\"><label>Right</label><input type=\"text\" [value]=\"getPdfSetting('footer.rightText', '')\" (input)=\"onPdfSettingInput('footer.rightText', $event)\" /></div>\n        </div>\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Font Size</label>\n            <input type=\"number\" min=\"1\" [value]=\"getPdfSetting('footer.fontSize', 9)\" (change)=\"onPdfSettingInput('footer.fontSize', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Color</label>\n            <input type=\"color\" [value]=\"getPdfSetting('footer.color', '#666666')\" (change)=\"onPdfSettingInput('footer.color', $event)\" />\n          </div>\n        </div>\n        <div class=\"form-group\">\n          <label>Footer Margins</label>\n          <div class=\"style-four-grid\">\n            <div><span>Left</span><input type=\"number\" [value]=\"getPdfSetting('footer.margin.0', 40)\" (change)=\"onPdfSettingInput('footer.margin.0', $event)\" /></div>\n            <div><span>Top</span><input type=\"number\" [value]=\"getPdfSetting('footer.margin.1', 12)\" (change)=\"onPdfSettingInput('footer.margin.1', $event)\" /></div>\n            <div><span>Right</span><input type=\"number\" [value]=\"getPdfSetting('footer.margin.2', 40)\" (change)=\"onPdfSettingInput('footer.margin.2', $event)\" /></div>\n            <div><span>Bottom</span><input type=\"number\" [value]=\"getPdfSetting('footer.margin.3', 0)\" (change)=\"onPdfSettingInput('footer.margin.3', $event)\" /></div>\n          </div>\n        </div>\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"getPdfSetting('footer.topBorder', false)\" (change)=\"onPdfSettingInput('footer.topBorder', $event)\" />\n          <span>Top line</span>\n        </label>\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Line Color</label>\n            <input type=\"color\" [value]=\"getPdfSetting('footer.borderColor', '#2f9e44')\" (change)=\"onPdfSettingInput('footer.borderColor', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Line Width</label>\n            <input type=\"number\" min=\"0\" [value]=\"getPdfSetting('footer.borderWidth', 1)\" (change)=\"onPdfSettingInput('footer.borderWidth', $event)\" />\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!headerSelect && selectedElement\" class=\"style-builder\">\n      <div class=\"style-builder-title\">{{ getStyleBuilderTitle() }}</div>\n\n      <div class=\"style-section-title\">Typography</div>\n      <div class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Font</label>\n          <select [value]=\"getActiveStyleValue('font', 'Helvetica Neue')\" (change)=\"onActiveStyleInput('font', $event)\">\n            <option value=\"Helvetica Neue\">Helvetica Neue</option>\n            <option value=\"Arial\">Arial</option>\n            <option value=\"Times New Roman\">Times New Roman</option>\n            <option value=\"Roboto\">Roboto</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Font Size</label>\n          <input type=\"number\" min=\"1\" [value]=\"getActiveStyleValue('fontSize', 12)\" (change)=\"onActiveStyleInput('fontSize', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Line Height</label>\n          <input type=\"number\" min=\"0.5\" step=\"0.1\" [value]=\"getActiveStyleValue('lineHeight', 1.2)\" (change)=\"onActiveStyleInput('lineHeight', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Letter Space</label>\n          <input type=\"number\" step=\"0.5\" [value]=\"getActiveStyleValue('characterSpacing', 0)\" (change)=\"onActiveStyleInput('characterSpacing', $event)\" />\n        </div>\n      </div>\n      <div class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Weight</label>\n          <select [value]=\"getActiveStyleValue('fontWeight', '400')\" (change)=\"onActiveStyleInput('fontWeight', $event)\">\n            <option value=\"400\">400 Normal</option>\n            <option value=\"500\">500 Medium</option>\n            <option value=\"600\">600 Semi Bold</option>\n            <option value=\"700\">700 Bold</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Align</label>\n          <select [value]=\"getActiveStyleValue('alignment', 'left')\" (change)=\"onActiveStyleInput('alignment', $event)\">\n            <option value=\"left\">Left</option>\n            <option value=\"center\">Center</option>\n            <option value=\"right\">Right</option>\n            <option value=\"justify\">Justify</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Decoration</label>\n          <select [value]=\"getActiveStyleValue('decoration', '')\" (change)=\"onActiveStyleInput('decoration', $event)\">\n            <option value=\"\">None</option>\n            <option value=\"underline\">Underline</option>\n            <option value=\"lineThrough\">Line Through</option>\n            <option value=\"overline\">Overline</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"style-toggle-row\">\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"getActiveStyleValue('bold', false)\" (change)=\"onActiveStyleInput('bold', $event)\" />\n          <span>Bold</span>\n        </label>\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"getActiveStyleValue('italic', false)\" (change)=\"onActiveStyleInput('italic', $event)\" />\n          <span>Italic</span>\n        </label>\n      </div>\n      <div class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Text Color</label>\n          <div class=\"style-color-row\">\n            <input type=\"color\" [value]=\"getActiveStyleValue('color', '#000000')\" (change)=\"onActiveStyleInput('color', $event)\" />\n            <input type=\"text\" [value]=\"getActiveStyleValue('color', '#000000')\" (change)=\"onActiveStyleInput('color', $event)\" />\n          </div>\n        </div>\n        <div class=\"form-group\">\n          <label>Background</label>\n          <div class=\"style-color-row\">\n            <input type=\"color\" [value]=\"getActiveStyleValue('fillColor', '#ffffff')\" (change)=\"onActiveStyleInput('fillColor', $event)\" />\n            <input type=\"text\" [value]=\"getActiveStyleValue('fillColor', '#ffffff')\" (change)=\"onActiveStyleInput('fillColor', $event)\" />\n          </div>\n        </div>\n      </div>\n\n      <div class=\"style-section-title\">Spacing</div>\n      <div class=\"form-group\">\n        <label>Margin</label>\n        <div class=\"style-four-grid\">\n          <div><span>Left</span><input type=\"number\" [value]=\"getActiveMargin(0)\" (change)=\"onActiveMarginInput(0, $event)\" /></div>\n          <div><span>Top</span><input type=\"number\" [value]=\"getActiveMargin(1)\" (change)=\"onActiveMarginInput(1, $event)\" /></div>\n          <div><span>Right</span><input type=\"number\" [value]=\"getActiveMargin(2)\" (change)=\"onActiveMarginInput(2, $event)\" /></div>\n          <div><span>Bottom</span><input type=\"number\" [value]=\"getActiveMargin(3)\" (change)=\"onActiveMarginInput(3, $event)\" /></div>\n        </div>\n      </div>\n      <div class=\"form-group\" *ngIf=\"selectedElement?.type === 'Section' || selectedElement?.type === 'Note'\">\n        <label>Inner Padding</label>\n        <div class=\"style-four-grid\">\n          <div><span>Left</span><input type=\"number\" [value]=\"getElementArrayValue('innerMargin', 0, 8)\" (change)=\"onElementArrayInput('innerMargin', 0, $event)\" /></div>\n          <div><span>Top</span><input type=\"number\" [value]=\"getElementArrayValue('innerMargin', 1, 6)\" (change)=\"onElementArrayInput('innerMargin', 1, $event)\" /></div>\n          <div><span>Right</span><input type=\"number\" [value]=\"getElementArrayValue('innerMargin', 2, 8)\" (change)=\"onElementArrayInput('innerMargin', 2, $event)\" /></div>\n          <div><span>Bottom</span><input type=\"number\" [value]=\"getElementArrayValue('innerMargin', 3, 6)\" (change)=\"onElementArrayInput('innerMargin', 3, $event)\" /></div>\n        </div>\n      </div>\n\n      <div class=\"style-section-title\">PDF Box Style</div>\n      <div class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Border Color</label>\n          <div class=\"style-color-row\">\n            <input type=\"color\" [value]=\"getActiveStyleValue('borderColor', '#2f9e44')\" (change)=\"onActiveStyleInput('borderColor', $event)\" />\n            <input type=\"text\" [value]=\"getActiveStyleValue('borderColor', '#2f9e44')\" (change)=\"onActiveStyleInput('borderColor', $event)\" />\n          </div>\n        </div>\n        <div class=\"form-group\">\n          <label>Opacity</label>\n          <input type=\"number\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"getActiveStyleValue('opacity', 1)\" (change)=\"onActiveStyleInput('opacity', $event)\" />\n        </div>\n      </div>\n\n      <div *ngIf=\"selectedElement?.type !== 'Table' || !selectColumn\" class=\"style-section-title\">Label Style</div>\n      <div *ngIf=\"selectedElement?.type !== 'Table' || !selectColumn\" class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Label Color</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('labelColor', '#222222')\" (change)=\"onActiveStyleInput('labelColor', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Label Size</label>\n          <input type=\"number\" min=\"1\" [value]=\"getActiveStyleValue('labelFontSize', getActiveStyleValue('fontSize', 12))\" (change)=\"onActiveStyleInput('labelFontSize', $event)\" />\n        </div>\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"getActiveStyleValue('labelBold', true)\" (change)=\"onActiveStyleInput('labelBold', $event)\" />\n          <span>Bold label</span>\n        </label>\n      </div>\n\n      <div *ngIf=\"selectedElement?.type === 'RichText' || selectedElement?.type === 'text'\" class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Heading Color</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('headingColor', '#2f9e44')\" (change)=\"onActiveStyleInput('headingColor', $event)\" />\n        </div>\n        <div class=\"form-group\" *ngIf=\"selectedElement?.type === 'text'\">\n          <label>Heading Size</label>\n          <input type=\"number\" min=\"1\" [value]=\"getActiveStyleValue('headingFontSize', getActiveStyleValue('fontSize', 12))\" (change)=\"onActiveStyleInput('headingFontSize', $event)\" />\n        </div>\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"selectedElement?.type === 'RichText' ? selectedElement?.headingFirstLine !== false : selectedElement?.headingFirstLine === true\" (change)=\"setValueByPath('headingFirstLine', $event.target.checked)\" />\n          <span>First line heading</span>\n        </label>\n      </div>\n\n      <div *ngIf=\"selectedElement?.type === 'Table' && selectColumn\" class=\"style-section-title\">Table Column</div>\n      <div *ngIf=\"selectedElement?.type === 'Table' && selectColumn\" class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Header Fill</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('fillColor', '#f1f5f9')\" (change)=\"onActiveStyleInput('fillColor', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Header Text</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('color', '#111827')\" (change)=\"onActiveStyleInput('color', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Cell Fill</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('cellFillColor', '#ffffff')\" (change)=\"onActiveStyleInput('cellFillColor', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Cell Text</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('cellColor', '#374151')\" (change)=\"onActiveStyleInput('cellColor', $event)\" />\n        </div>\n      </div>\n      <div *ngIf=\"selectedElement?.type === 'Table' && selectColumn\" class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Column Width</label>\n          <select [value]=\"getActiveColumnWidthMode()\" (change)=\"onActiveColumnWidthModeChange($event)\">\n            <option value=\"*\">Default</option>\n            <option value=\"auto\">Auto</option>\n            <option value=\"custom\">Custom</option>\n          </select>\n        </div>\n        <div class=\"form-group\" *ngIf=\"getActiveColumnWidthMode() === 'custom'\">\n          <label>Width</label>\n          <input type=\"number\" min=\"1\" [value]=\"getActiveStyleValue('width', 80)\" (change)=\"onActiveStyleInput('width', $event)\" />\n        </div>\n      </div>\n    </div>\n\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            <!-- SKS16SEP25 formula  -->\n            <div *ngIf=\"prop.type === 'formula'\">\n              <app-formula-input\n                [attributes]=\"selectedElement['fieldsMeta']\"\n                [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n                (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n              </app-formula-input>\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=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n    <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</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],textarea,select{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input[type=text],input[type=number],select{height:40px}textarea{min-height:120px;resize:vertical;line-height:1.4}input:focus,textarea: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:5px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}.document-settings{border:1px solid #dbe4ef;background:#f8fafc;border-radius:6px;padding:10px;margin-bottom:14px}.document-settings-title{font-size:14px;font-weight:700;color:#1f2937;margin-bottom:10px}.document-color-row{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center}.document-color-row input[type=color]{width:44px;height:40px;padding:3px}.document-toggle label{align-items:center;color:#334155}.document-subpanel{border-left:3px solid #2c6dd5;padding-left:10px;margin-bottom:12px}.document-help{color:#64748b;font-size:12px;line-height:1.4;margin:-4px 0 10px}.style-builder{border:1px solid #dbe4ef;background:#fff;border-radius:6px;padding:12px;margin-bottom:14px}.style-builder-title{font-size:14px;font-weight:700;color:#1f2937;margin-bottom:10px}.style-section-title{font-size:12px;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:0;border-top:1px solid #e5e7eb;padding-top:12px;margin:14px 0 10px}.style-section-title:first-of-type{border-top:0;padding-top:0}.style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.style-grid .form-group{min-width:0}.style-color-row{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center}.style-color-row input[type=color],.style-builder input[type=color]{width:44px;height:40px;padding:3px}.style-four-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.style-four-grid span{display:block;color:#64748b;font-size:11px;margin-bottom:4px}.style-four-grid input{width:100%}.style-toggle-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}.style-check-row{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;color:#334155;font-size:13px}.style-check-row input{width:auto}.style-nested{border-left:3px solid #2c6dd5;padding-left:10px;margin-bottom:12px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],textarea,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}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff;margin-right:10px}.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;width:35px;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", "onlyView", "rowData"], 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" }, { kind: "component", type: FormulaInputComponent, selector: "app-formula-input", inputs: ["attributes", "initialFormula"], outputs: ["formulaChange", "formulaValidation"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PdfPropertiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pdf-properties', standalone: true, imports: [CommonModule, FormsModule, NxtSearchBox, ImageCropperComponent, NxtCustomTranslatePipe, FormulaInputComponent], 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  <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        <div style=\"height: 200px;\">\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>\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=\"\"></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            <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 *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.type === 'fieldSize'\" [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)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom') : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' ) ) : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' )\">\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.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== '*' && selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== 'auto'\"\n              type=\"number\"\n              class=\"size-input\"\n              min=\"1\"\n              max=\"100\"\n              [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.valueAsNumber < 1 ? 1 :\n              $event.target.valueAsNumber > 100 ? 100 :\n              $event.target.valueAsNumber) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n              $event.target.valueAsNumber > 100 ? 100 :\n              $event.target.valueAsNumber) ) : setValueByPath(prop.key, $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          <!-- SKS16SEP25 formula  -->\n          <div *ngIf=\"prop.type === 'formula'\">\n            <app-formula-input\n              [attributes]=\"selectedElement['fieldsMeta']\"\n              [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n              (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n            </app-formula-input>\n          </div>\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>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]=\"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                  <!--  Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" 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)\" (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                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (change)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.checked) ) : 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          <!-- SKS16SEP25 formula  -->\n          <div *ngIf=\"prop.type === 'formula'\">\n            <app-formula-input\n              [attributes]=\"selectedElement['fieldsMeta']\"\n              [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n              (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n            </app-formula-input>\n          </div>\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            <!-- SKS16SEP25 formula  -->\n            <div *ngIf=\"prop.type === 'formula'\">\n              <app-formula-input\n                [attributes]=\"selectedElement['fieldsMeta']\"\n                [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n                (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n              </app-formula-input>\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=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n    <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</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:5px;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}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff;margin-right:10px}.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;width:35px;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, FormulaInputComponent], 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  <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n    <div *ngIf=\"headerSelect\" class=\"document-settings\">\n      <div class=\"document-settings-title\">Document Canvas</div>\n      <div class=\"form-group\">\n        <label>Page Size</label>\n        <select [value]=\"getPdfSetting('pageSize', 'A4')\" (change)=\"onPdfSettingInput('pageSize', $event)\">\n          <option value=\"A4\">A4</option>\n          <option value=\"LETTER\">Letter</option>\n          <option value=\"LEGAL\">Legal</option>\n        </select>\n      </div>\n      <div class=\"form-group\">\n        <label>Orientation</label>\n        <select [value]=\"getPdfSetting('pageOrientation', 'portrait')\" (change)=\"onPdfSettingInput('pageOrientation', $event)\">\n          <option value=\"portrait\">Portrait</option>\n          <option value=\"landscape\">Landscape</option>\n        </select>\n      </div>\n      <div class=\"form-group\">\n        <label>Background Color</label>\n        <div class=\"document-color-row\">\n          <input type=\"color\" [value]=\"getPdfSetting('backgroundColor', '#ffffff')\" (change)=\"onPdfSettingInput('backgroundColor', $event)\" />\n          <input type=\"text\" [value]=\"getPdfSetting('backgroundColor', '#ffffff')\" (change)=\"onPdfSettingInput('backgroundColor', $event)\" />\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label>Page Margins</label>\n        <div class=\"margin-inputs\">\n          <div><label>Left</label><input type=\"number\" [value]=\"getPdfSetting('pageMargins.0', 40)\" (change)=\"onPdfSettingInput('pageMargins.0', $event)\" /></div>\n          <div><label>Top</label><input type=\"number\" [value]=\"getPdfSetting('pageMargins.1', 40)\" (change)=\"onPdfSettingInput('pageMargins.1', $event)\" /></div>\n          <div><label>Right</label><input type=\"number\" [value]=\"getPdfSetting('pageMargins.2', 40)\" (change)=\"onPdfSettingInput('pageMargins.2', $event)\" /></div>\n          <div><label>Bottom</label><input type=\"number\" [value]=\"getPdfSetting('pageMargins.3', 80)\" (change)=\"onPdfSettingInput('pageMargins.3', $event)\" /></div>\n        </div>\n      </div>\n      <div class=\"form-group document-toggle\">\n        <label>\n          <input type=\"checkbox\" [checked]=\"getPdfSetting('header.enabled', false)\" (change)=\"onPdfSettingInput('header.enabled', $event)\" />\n          Running Header\n        </label>\n      </div>\n      <div *ngIf=\"getPdfSetting('header.enabled', false)\" class=\"document-subpanel\">\n        <div class=\"form-group\">\n          <label>Show Header</label>\n          <select [value]=\"getPdfSetting('header.showOn', 'all')\" (change)=\"onPdfSettingInput('header.showOn', $event)\">\n            <option value=\"all\">All Pages</option>\n            <option value=\"first\">First Page Only</option>\n            <option value=\"notFirst\">Skip First Page</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Header Left</label>\n          <input type=\"text\" [value]=\"getPdfSetting('header.leftText', '')\" (input)=\"onPdfSettingInput('header.leftText', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Header Center</label>\n          <input type=\"text\" [value]=\"getPdfSetting('header.centerText', '')\" (input)=\"onPdfSettingInput('header.centerText', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Header Right</label>\n          <input type=\"text\" [value]=\"getPdfSetting('header.rightText', '')\" (input)=\"onPdfSettingInput('header.rightText', $event)\" />\n        </div>\n        <div class=\"form-group document-toggle\">\n          <label>\n            <input type=\"checkbox\" [checked]=\"getPdfSetting('header.bottomBorder', false)\" (change)=\"onPdfSettingInput('header.bottomBorder', $event)\" />\n            Bottom Line\n          </label>\n        </div>\n        <div class=\"form-group\">\n          <label>Header Line Color</label>\n          <input type=\"color\" [value]=\"getPdfSetting('header.borderColor', '#2f9e44')\" (change)=\"onPdfSettingInput('header.borderColor', $event)\" />\n        </div>\n      </div>\n      <div class=\"form-group document-toggle\">\n        <label>\n          <input type=\"checkbox\" [checked]=\"getPdfSetting('watermark.enabled', false)\" (change)=\"onPdfSettingInput('watermark.enabled', $event)\" />\n          Watermark\n        </label>\n      </div>\n      <div *ngIf=\"getPdfSetting('watermark.enabled', false)\" class=\"document-subpanel\">\n        <div class=\"form-group\">\n          <label>Watermark Text</label>\n          <input type=\"text\" [value]=\"getPdfSetting('watermark.text', '')\" (input)=\"onPdfSettingInput('watermark.text', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Watermark Color</label>\n          <input type=\"color\" [value]=\"getPdfSetting('watermark.color', '#9ca3af')\" (change)=\"onPdfSettingInput('watermark.color', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Opacity</label>\n          <input type=\"number\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"getPdfSetting('watermark.opacity', 0.16)\" (change)=\"onPdfSettingInput('watermark.opacity', $event)\" />\n        </div>\n      </div>\n      <div class=\"form-group document-toggle\">\n        <label>\n          <input type=\"checkbox\" [checked]=\"getPdfSetting('footer.enabled', false)\" (change)=\"onPdfSettingInput('footer.enabled', $event)\" />\n          Footer\n        </label>\n      </div>\n      <div *ngIf=\"getPdfSetting('footer.enabled', false)\" class=\"document-subpanel\">\n        <div class=\"form-group\">\n          <label>Show Footer</label>\n          <select [value]=\"getPdfSetting('footer.showOn', 'last')\" (change)=\"onPdfSettingInput('footer.showOn', $event)\">\n            <option value=\"last\">Last Page Only</option>\n            <option value=\"all\">All Pages</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Footer Content</label>\n          <input type=\"text\" [value]=\"getPdfSetting('footer.text', '')\" (input)=\"onPdfSettingInput('footer.text', $event)\" />\n        </div>\n        <div class=\"document-help\">Use {{'{{currentPage}}'}} and {{'{{pageCount}}'}} for page numbers.</div>\n        <div class=\"form-group\">\n          <label>Footer Left</label>\n          <input type=\"text\" [value]=\"getPdfSetting('footer.leftText', '')\" (input)=\"onPdfSettingInput('footer.leftText', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Footer Center</label>\n          <input type=\"text\" [value]=\"getPdfSetting('footer.centerText', '')\" (input)=\"onPdfSettingInput('footer.centerText', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Footer Right</label>\n          <input type=\"text\" [value]=\"getPdfSetting('footer.rightText', '')\" (input)=\"onPdfSettingInput('footer.rightText', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Alignment</label>\n          <select [value]=\"getPdfSetting('footer.alignment', 'center')\" (change)=\"onPdfSettingInput('footer.alignment', $event)\">\n            <option value=\"left\">Left</option>\n            <option value=\"center\">Center</option>\n            <option value=\"right\">Right</option>\n          </select>\n        </div>\n        <div class=\"form-group document-toggle\">\n          <label>\n            <input type=\"checkbox\" [checked]=\"getPdfSetting('footer.topBorder', false)\" (change)=\"onPdfSettingInput('footer.topBorder', $event)\" />\n            Top Line\n          </label>\n        </div>\n        <div class=\"form-group\">\n          <label>Footer Line Color</label>\n          <input type=\"color\" [value]=\"getPdfSetting('footer.borderColor', '#2f9e44')\" (change)=\"onPdfSettingInput('footer.borderColor', $event)\" />\n        </div>\n      </div>\n    </div>\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        <div style=\"height: 200px;\">\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>\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          <textarea *ngIf=\"prop.type === 'textarea'\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n            (input)=\"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          </textarea>\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=\"\"></option>\n            <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.labelPath | nxtCustomTranslate : option.label  }} </option>\n          </select>\n\n          <select *ngIf=\"prop.type === 'select' && prop.key !== 'supportType' && prop.key !== 'lineStyle'\" [value]=\"getValueByPath(prop.key)\"\n            (change)=\"setValueByPath(prop.key, $event.target.value)\">\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            <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 *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.type === 'fieldSize'\" [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)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom') : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' ) ) : onWidthSelect( $event.target.value === 'Default' ? '*' : $event.target.value === 'Auto' ? 'auto' : 'custom' )\">\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.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== '*' && selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key) !== 'auto'\"\n              type=\"number\"\n              class=\"size-input\"\n              min=\"1\"\n              max=\"100\"\n              [value]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\" (input)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event.target.valueAsNumber < 1 ? 1 :\n              $event.target.valueAsNumber > 100 ? 100 :\n              $event.target.valueAsNumber) : setValueByPath(prop.key, $event.target.valueAsNumber < 1 ? 1 :\n              $event.target.valueAsNumber > 100 ? 100 :\n              $event.target.valueAsNumber) ) : setValueByPath(prop.key, $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          <!-- SKS16SEP25 formula  -->\n          <div *ngIf=\"prop.type === 'formula'\">\n            <app-formula-input\n              [attributes]=\"selectedElement['fieldsMeta']\"\n              [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n              (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n            </app-formula-input>\n          </div>\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>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          <textarea *ngIf=\"prop.type === 'textarea'\" [placeholder]=\"prop.placeholder\"\n            [value]=\"selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n            (input)=\"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          </textarea>\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]=\"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                  <!--  Render input field only if subProp.type is 'array' -->\n                  <input *ngIf=\"subProp.type === 'array'\" 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)\" (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                    <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n                  <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n                    (change)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.checked) ) : 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          <!-- SKS16SEP25 formula  -->\n          <div *ngIf=\"prop.type === 'formula'\">\n            <app-formula-input\n              [attributes]=\"selectedElement['fieldsMeta']\"\n              [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n              (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n            </app-formula-input>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n    <!-- SKS26MAY26 builder stype tool -->\n    <div *ngIf=\"headerSelect\" class=\"style-builder\">\n      <div class=\"style-builder-title\">Document Style Builder</div>\n      <div class=\"style-section-title\">Page</div>\n      <div class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Page Size</label>\n          <select [value]=\"getPdfSetting('pageSize', 'A4')\" (change)=\"onPdfSettingInput('pageSize', $event)\">\n            <option value=\"A4\">A4</option>\n            <option value=\"LETTER\">Letter</option>\n            <option value=\"LEGAL\">Legal</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Orientation</label>\n          <select [value]=\"getPdfSetting('pageOrientation', 'portrait')\" (change)=\"onPdfSettingInput('pageOrientation', $event)\">\n            <option value=\"portrait\">Portrait</option>\n            <option value=\"landscape\">Landscape</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label>Background</label>\n        <div class=\"style-color-row\">\n          <input type=\"color\" [value]=\"getPdfSetting('backgroundColor', '#ffffff')\" (change)=\"onPdfSettingInput('backgroundColor', $event)\" />\n          <input type=\"text\" [value]=\"getPdfSetting('backgroundColor', '#ffffff')\" (change)=\"onPdfSettingInput('backgroundColor', $event)\" />\n        </div>\n      </div>\n      <div class=\"form-group\">\n        <label>Page Margins</label>\n        <div class=\"style-four-grid\">\n          <div><span>Left</span><input type=\"number\" [value]=\"getPdfSetting('pageMargins.0', 40)\" (change)=\"onPdfSettingInput('pageMargins.0', $event)\" /></div>\n          <div><span>Top</span><input type=\"number\" [value]=\"getPdfSetting('pageMargins.1', 40)\" (change)=\"onPdfSettingInput('pageMargins.1', $event)\" /></div>\n          <div><span>Right</span><input type=\"number\" [value]=\"getPdfSetting('pageMargins.2', 40)\" (change)=\"onPdfSettingInput('pageMargins.2', $event)\" /></div>\n          <div><span>Bottom</span><input type=\"number\" [value]=\"getPdfSetting('pageMargins.3', 80)\" (change)=\"onPdfSettingInput('pageMargins.3', $event)\" /></div>\n        </div>\n      </div>\n\n      <div class=\"style-section-title\">Running Header</div>\n      <label class=\"style-check-row\">\n        <input type=\"checkbox\" [checked]=\"getPdfSetting('header.enabled', false)\" (change)=\"onPdfSettingInput('header.enabled', $event)\" />\n        <span>Enable header</span>\n      </label>\n      <div *ngIf=\"getPdfSetting('header.enabled', false)\" class=\"style-nested\">\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Show On</label>\n            <select [value]=\"getPdfSetting('header.showOn', 'all')\" (change)=\"onPdfSettingInput('header.showOn', $event)\">\n              <option value=\"all\">All Pages</option>\n              <option value=\"first\">First Page Only</option>\n              <option value=\"notFirst\">Skip First Page</option>\n            </select>\n          </div>\n          <div class=\"form-group\">\n            <label>Font Size</label>\n            <input type=\"number\" min=\"1\" [value]=\"getPdfSetting('header.fontSize', 9)\" (change)=\"onPdfSettingInput('header.fontSize', $event)\" />\n          </div>\n        </div>\n        <div class=\"form-group\">\n          <label>Color</label>\n          <div class=\"style-color-row\">\n            <input type=\"color\" [value]=\"getPdfSetting('header.color', '#666666')\" (change)=\"onPdfSettingInput('header.color', $event)\" />\n            <input type=\"text\" [value]=\"getPdfSetting('header.color', '#666666')\" (change)=\"onPdfSettingInput('header.color', $event)\" />\n          </div>\n        </div>\n        <div class=\"style-grid\">\n          <div class=\"form-group\"><label>Left</label><input type=\"text\" [value]=\"getPdfSetting('header.leftText', '')\" (input)=\"onPdfSettingInput('header.leftText', $event)\" /></div>\n          <div class=\"form-group\"><label>Center</label><input type=\"text\" [value]=\"getPdfSetting('header.centerText', '')\" (input)=\"onPdfSettingInput('header.centerText', $event)\" /></div>\n          <div class=\"form-group\"><label>Right</label><input type=\"text\" [value]=\"getPdfSetting('header.rightText', '')\" (input)=\"onPdfSettingInput('header.rightText', $event)\" /></div>\n        </div>\n        <div class=\"form-group\">\n          <label>Header Margins</label>\n          <div class=\"style-four-grid\">\n            <div><span>Left</span><input type=\"number\" [value]=\"getPdfSetting('header.margin.0', 40)\" (change)=\"onPdfSettingInput('header.margin.0', $event)\" /></div>\n            <div><span>Top</span><input type=\"number\" [value]=\"getPdfSetting('header.margin.1', 20)\" (change)=\"onPdfSettingInput('header.margin.1', $event)\" /></div>\n            <div><span>Right</span><input type=\"number\" [value]=\"getPdfSetting('header.margin.2', 40)\" (change)=\"onPdfSettingInput('header.margin.2', $event)\" /></div>\n            <div><span>Bottom</span><input type=\"number\" [value]=\"getPdfSetting('header.margin.3', 0)\" (change)=\"onPdfSettingInput('header.margin.3', $event)\" /></div>\n          </div>\n        </div>\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"getPdfSetting('header.bottomBorder', false)\" (change)=\"onPdfSettingInput('header.bottomBorder', $event)\" />\n          <span>Bottom line</span>\n        </label>\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Line Color</label>\n            <input type=\"color\" [value]=\"getPdfSetting('header.borderColor', '#2f9e44')\" (change)=\"onPdfSettingInput('header.borderColor', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Line Width</label>\n            <input type=\"number\" min=\"0\" [value]=\"getPdfSetting('header.borderWidth', 1)\" (change)=\"onPdfSettingInput('header.borderWidth', $event)\" />\n          </div>\n        </div>\n      </div>\n\n      <div class=\"style-section-title\">Watermark</div>\n      <label class=\"style-check-row\">\n        <input type=\"checkbox\" [checked]=\"getPdfSetting('watermark.enabled', false)\" (change)=\"onPdfSettingInput('watermark.enabled', $event)\" />\n        <span>Enable watermark</span>\n      </label>\n      <div *ngIf=\"getPdfSetting('watermark.enabled', false)\" class=\"style-nested\">\n        <div class=\"form-group\">\n          <label>Text</label>\n          <input type=\"text\" [value]=\"getPdfSetting('watermark.text', '')\" (input)=\"onPdfSettingInput('watermark.text', $event)\" />\n        </div>\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Color</label>\n            <input type=\"color\" [value]=\"getPdfSetting('watermark.color', '#9ca3af')\" (change)=\"onPdfSettingInput('watermark.color', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Opacity</label>\n            <input type=\"number\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"getPdfSetting('watermark.opacity', 0.16)\" (change)=\"onPdfSettingInput('watermark.opacity', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Font Size</label>\n            <input type=\"number\" min=\"1\" [value]=\"getPdfSetting('watermark.fontSize', 64)\" (change)=\"onPdfSettingInput('watermark.fontSize', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Angle</label>\n            <input type=\"number\" [value]=\"getPdfSetting('watermark.angle', -32)\" (change)=\"onPdfSettingInput('watermark.angle', $event)\" />\n          </div>\n        </div>\n      </div>\n\n      <div class=\"style-section-title\">Footer</div>\n      <label class=\"style-check-row\">\n        <input type=\"checkbox\" [checked]=\"getPdfSetting('footer.enabled', false)\" (change)=\"onPdfSettingInput('footer.enabled', $event)\" />\n        <span>Enable footer</span>\n      </label>\n      <div *ngIf=\"getPdfSetting('footer.enabled', false)\" class=\"style-nested\">\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Show On</label>\n            <select [value]=\"getPdfSetting('footer.showOn', 'last')\" (change)=\"onPdfSettingInput('footer.showOn', $event)\">\n              <option value=\"last\">Last Page Only</option>\n              <option value=\"all\">All Pages</option>\n            </select>\n          </div>\n          <div class=\"form-group\">\n            <label>Alignment</label>\n            <select [value]=\"getPdfSetting('footer.alignment', 'center')\" (change)=\"onPdfSettingInput('footer.alignment', $event)\">\n              <option value=\"left\">Left</option>\n              <option value=\"center\">Center</option>\n              <option value=\"right\">Right</option>\n            </select>\n          </div>\n        </div>\n        <div class=\"style-grid\">\n          <div class=\"form-group\"><label>Left</label><input type=\"text\" [value]=\"getPdfSetting('footer.leftText', '')\" (input)=\"onPdfSettingInput('footer.leftText', $event)\" /></div>\n          <div class=\"form-group\"><label>Center</label><input type=\"text\" [value]=\"getPdfSetting('footer.centerText', '')\" (input)=\"onPdfSettingInput('footer.centerText', $event)\" /></div>\n          <div class=\"form-group\"><label>Right</label><input type=\"text\" [value]=\"getPdfSetting('footer.rightText', '')\" (input)=\"onPdfSettingInput('footer.rightText', $event)\" /></div>\n        </div>\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Font Size</label>\n            <input type=\"number\" min=\"1\" [value]=\"getPdfSetting('footer.fontSize', 9)\" (change)=\"onPdfSettingInput('footer.fontSize', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Color</label>\n            <input type=\"color\" [value]=\"getPdfSetting('footer.color', '#666666')\" (change)=\"onPdfSettingInput('footer.color', $event)\" />\n          </div>\n        </div>\n        <div class=\"form-group\">\n          <label>Footer Margins</label>\n          <div class=\"style-four-grid\">\n            <div><span>Left</span><input type=\"number\" [value]=\"getPdfSetting('footer.margin.0', 40)\" (change)=\"onPdfSettingInput('footer.margin.0', $event)\" /></div>\n            <div><span>Top</span><input type=\"number\" [value]=\"getPdfSetting('footer.margin.1', 12)\" (change)=\"onPdfSettingInput('footer.margin.1', $event)\" /></div>\n            <div><span>Right</span><input type=\"number\" [value]=\"getPdfSetting('footer.margin.2', 40)\" (change)=\"onPdfSettingInput('footer.margin.2', $event)\" /></div>\n            <div><span>Bottom</span><input type=\"number\" [value]=\"getPdfSetting('footer.margin.3', 0)\" (change)=\"onPdfSettingInput('footer.margin.3', $event)\" /></div>\n          </div>\n        </div>\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"getPdfSetting('footer.topBorder', false)\" (change)=\"onPdfSettingInput('footer.topBorder', $event)\" />\n          <span>Top line</span>\n        </label>\n        <div class=\"style-grid\">\n          <div class=\"form-group\">\n            <label>Line Color</label>\n            <input type=\"color\" [value]=\"getPdfSetting('footer.borderColor', '#2f9e44')\" (change)=\"onPdfSettingInput('footer.borderColor', $event)\" />\n          </div>\n          <div class=\"form-group\">\n            <label>Line Width</label>\n            <input type=\"number\" min=\"0\" [value]=\"getPdfSetting('footer.borderWidth', 1)\" (change)=\"onPdfSettingInput('footer.borderWidth', $event)\" />\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"!headerSelect && selectedElement\" class=\"style-builder\">\n      <div class=\"style-builder-title\">{{ getStyleBuilderTitle() }}</div>\n\n      <div class=\"style-section-title\">Typography</div>\n      <div class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Font</label>\n          <select [value]=\"getActiveStyleValue('font', 'Helvetica Neue')\" (change)=\"onActiveStyleInput('font', $event)\">\n            <option value=\"Helvetica Neue\">Helvetica Neue</option>\n            <option value=\"Arial\">Arial</option>\n            <option value=\"Times New Roman\">Times New Roman</option>\n            <option value=\"Roboto\">Roboto</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Font Size</label>\n          <input type=\"number\" min=\"1\" [value]=\"getActiveStyleValue('fontSize', 12)\" (change)=\"onActiveStyleInput('fontSize', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Line Height</label>\n          <input type=\"number\" min=\"0.5\" step=\"0.1\" [value]=\"getActiveStyleValue('lineHeight', 1.2)\" (change)=\"onActiveStyleInput('lineHeight', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Letter Space</label>\n          <input type=\"number\" step=\"0.5\" [value]=\"getActiveStyleValue('characterSpacing', 0)\" (change)=\"onActiveStyleInput('characterSpacing', $event)\" />\n        </div>\n      </div>\n      <div class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Weight</label>\n          <select [value]=\"getActiveStyleValue('fontWeight', '400')\" (change)=\"onActiveStyleInput('fontWeight', $event)\">\n            <option value=\"400\">400 Normal</option>\n            <option value=\"500\">500 Medium</option>\n            <option value=\"600\">600 Semi Bold</option>\n            <option value=\"700\">700 Bold</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Align</label>\n          <select [value]=\"getActiveStyleValue('alignment', 'left')\" (change)=\"onActiveStyleInput('alignment', $event)\">\n            <option value=\"left\">Left</option>\n            <option value=\"center\">Center</option>\n            <option value=\"right\">Right</option>\n            <option value=\"justify\">Justify</option>\n          </select>\n        </div>\n        <div class=\"form-group\">\n          <label>Decoration</label>\n          <select [value]=\"getActiveStyleValue('decoration', '')\" (change)=\"onActiveStyleInput('decoration', $event)\">\n            <option value=\"\">None</option>\n            <option value=\"underline\">Underline</option>\n            <option value=\"lineThrough\">Line Through</option>\n            <option value=\"overline\">Overline</option>\n          </select>\n        </div>\n      </div>\n      <div class=\"style-toggle-row\">\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"getActiveStyleValue('bold', false)\" (change)=\"onActiveStyleInput('bold', $event)\" />\n          <span>Bold</span>\n        </label>\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"getActiveStyleValue('italic', false)\" (change)=\"onActiveStyleInput('italic', $event)\" />\n          <span>Italic</span>\n        </label>\n      </div>\n      <div class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Text Color</label>\n          <div class=\"style-color-row\">\n            <input type=\"color\" [value]=\"getActiveStyleValue('color', '#000000')\" (change)=\"onActiveStyleInput('color', $event)\" />\n            <input type=\"text\" [value]=\"getActiveStyleValue('color', '#000000')\" (change)=\"onActiveStyleInput('color', $event)\" />\n          </div>\n        </div>\n        <div class=\"form-group\">\n          <label>Background</label>\n          <div class=\"style-color-row\">\n            <input type=\"color\" [value]=\"getActiveStyleValue('fillColor', '#ffffff')\" (change)=\"onActiveStyleInput('fillColor', $event)\" />\n            <input type=\"text\" [value]=\"getActiveStyleValue('fillColor', '#ffffff')\" (change)=\"onActiveStyleInput('fillColor', $event)\" />\n          </div>\n        </div>\n      </div>\n\n      <div class=\"style-section-title\">Spacing</div>\n      <div class=\"form-group\">\n        <label>Margin</label>\n        <div class=\"style-four-grid\">\n          <div><span>Left</span><input type=\"number\" [value]=\"getActiveMargin(0)\" (change)=\"onActiveMarginInput(0, $event)\" /></div>\n          <div><span>Top</span><input type=\"number\" [value]=\"getActiveMargin(1)\" (change)=\"onActiveMarginInput(1, $event)\" /></div>\n          <div><span>Right</span><input type=\"number\" [value]=\"getActiveMargin(2)\" (change)=\"onActiveMarginInput(2, $event)\" /></div>\n          <div><span>Bottom</span><input type=\"number\" [value]=\"getActiveMargin(3)\" (change)=\"onActiveMarginInput(3, $event)\" /></div>\n        </div>\n      </div>\n      <div class=\"form-group\" *ngIf=\"selectedElement?.type === 'Section' || selectedElement?.type === 'Note'\">\n        <label>Inner Padding</label>\n        <div class=\"style-four-grid\">\n          <div><span>Left</span><input type=\"number\" [value]=\"getElementArrayValue('innerMargin', 0, 8)\" (change)=\"onElementArrayInput('innerMargin', 0, $event)\" /></div>\n          <div><span>Top</span><input type=\"number\" [value]=\"getElementArrayValue('innerMargin', 1, 6)\" (change)=\"onElementArrayInput('innerMargin', 1, $event)\" /></div>\n          <div><span>Right</span><input type=\"number\" [value]=\"getElementArrayValue('innerMargin', 2, 8)\" (change)=\"onElementArrayInput('innerMargin', 2, $event)\" /></div>\n          <div><span>Bottom</span><input type=\"number\" [value]=\"getElementArrayValue('innerMargin', 3, 6)\" (change)=\"onElementArrayInput('innerMargin', 3, $event)\" /></div>\n        </div>\n      </div>\n\n      <div class=\"style-section-title\">PDF Box Style</div>\n      <div class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Border Color</label>\n          <div class=\"style-color-row\">\n            <input type=\"color\" [value]=\"getActiveStyleValue('borderColor', '#2f9e44')\" (change)=\"onActiveStyleInput('borderColor', $event)\" />\n            <input type=\"text\" [value]=\"getActiveStyleValue('borderColor', '#2f9e44')\" (change)=\"onActiveStyleInput('borderColor', $event)\" />\n          </div>\n        </div>\n        <div class=\"form-group\">\n          <label>Opacity</label>\n          <input type=\"number\" min=\"0\" max=\"1\" step=\"0.05\" [value]=\"getActiveStyleValue('opacity', 1)\" (change)=\"onActiveStyleInput('opacity', $event)\" />\n        </div>\n      </div>\n\n      <div *ngIf=\"selectedElement?.type !== 'Table' || !selectColumn\" class=\"style-section-title\">Label Style</div>\n      <div *ngIf=\"selectedElement?.type !== 'Table' || !selectColumn\" class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Label Color</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('labelColor', '#222222')\" (change)=\"onActiveStyleInput('labelColor', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Label Size</label>\n          <input type=\"number\" min=\"1\" [value]=\"getActiveStyleValue('labelFontSize', getActiveStyleValue('fontSize', 12))\" (change)=\"onActiveStyleInput('labelFontSize', $event)\" />\n        </div>\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"getActiveStyleValue('labelBold', true)\" (change)=\"onActiveStyleInput('labelBold', $event)\" />\n          <span>Bold label</span>\n        </label>\n      </div>\n\n      <div *ngIf=\"selectedElement?.type === 'RichText' || selectedElement?.type === 'text'\" class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Heading Color</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('headingColor', '#2f9e44')\" (change)=\"onActiveStyleInput('headingColor', $event)\" />\n        </div>\n        <div class=\"form-group\" *ngIf=\"selectedElement?.type === 'text'\">\n          <label>Heading Size</label>\n          <input type=\"number\" min=\"1\" [value]=\"getActiveStyleValue('headingFontSize', getActiveStyleValue('fontSize', 12))\" (change)=\"onActiveStyleInput('headingFontSize', $event)\" />\n        </div>\n        <label class=\"style-check-row\">\n          <input type=\"checkbox\" [checked]=\"selectedElement?.type === 'RichText' ? selectedElement?.headingFirstLine !== false : selectedElement?.headingFirstLine === true\" (change)=\"setValueByPath('headingFirstLine', $event.target.checked)\" />\n          <span>First line heading</span>\n        </label>\n      </div>\n\n      <div *ngIf=\"selectedElement?.type === 'Table' && selectColumn\" class=\"style-section-title\">Table Column</div>\n      <div *ngIf=\"selectedElement?.type === 'Table' && selectColumn\" class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Header Fill</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('fillColor', '#f1f5f9')\" (change)=\"onActiveStyleInput('fillColor', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Header Text</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('color', '#111827')\" (change)=\"onActiveStyleInput('color', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Cell Fill</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('cellFillColor', '#ffffff')\" (change)=\"onActiveStyleInput('cellFillColor', $event)\" />\n        </div>\n        <div class=\"form-group\">\n          <label>Cell Text</label>\n          <input type=\"color\" [value]=\"getActiveStyleValue('cellColor', '#374151')\" (change)=\"onActiveStyleInput('cellColor', $event)\" />\n        </div>\n      </div>\n      <div *ngIf=\"selectedElement?.type === 'Table' && selectColumn\" class=\"style-grid\">\n        <div class=\"form-group\">\n          <label>Column Width</label>\n          <select [value]=\"getActiveColumnWidthMode()\" (change)=\"onActiveColumnWidthModeChange($event)\">\n            <option value=\"*\">Default</option>\n            <option value=\"auto\">Auto</option>\n            <option value=\"custom\">Custom</option>\n          </select>\n        </div>\n        <div class=\"form-group\" *ngIf=\"getActiveColumnWidthMode() === 'custom'\">\n          <label>Width</label>\n          <input type=\"number\" min=\"1\" [value]=\"getActiveStyleValue('width', 80)\" (change)=\"onActiveStyleInput('width', $event)\" />\n        </div>\n      </div>\n    </div>\n\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            <!-- SKS16SEP25 formula  -->\n            <div *ngIf=\"prop.type === 'formula'\">\n              <app-formula-input\n                [attributes]=\"selectedElement['fieldsMeta']\"\n                [initialFormula]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key)\"\n                (formulaChange)=\"selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event) ) : setValueByPath(prop.key, $event)\">\n              </app-formula-input>\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=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n    <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</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],textarea,select{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input[type=text],input[type=number],select{height:40px}textarea{min-height:120px;resize:vertical;line-height:1.4}input:focus,textarea: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:5px;max-height:77vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}.document-settings{border:1px solid #dbe4ef;background:#f8fafc;border-radius:6px;padding:10px;margin-bottom:14px}.document-settings-title{font-size:14px;font-weight:700;color:#1f2937;margin-bottom:10px}.document-color-row{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center}.document-color-row input[type=color]{width:44px;height:40px;padding:3px}.document-toggle label{align-items:center;color:#334155}.document-subpanel{border-left:3px solid #2c6dd5;padding-left:10px;margin-bottom:12px}.document-help{color:#64748b;font-size:12px;line-height:1.4;margin:-4px 0 10px}.style-builder{border:1px solid #dbe4ef;background:#fff;border-radius:6px;padding:12px;margin-bottom:14px}.style-builder-title{font-size:14px;font-weight:700;color:#1f2937;margin-bottom:10px}.style-section-title{font-size:12px;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:0;border-top:1px solid #e5e7eb;padding-top:12px;margin:14px 0 10px}.style-section-title:first-of-type{border-top:0;padding-top:0}.style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.style-grid .form-group{min-width:0}.style-color-row{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center}.style-color-row input[type=color],.style-builder input[type=color]{width:44px;height:40px;padding:3px}.style-four-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.style-four-grid span{display:block;color:#64748b;font-size:11px;margin-bottom:4px}.style-four-grid input{width:100%}.style-toggle-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}.style-check-row{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;color:#334155;font-size:13px}.style-check-row input{width:auto}.style-nested{border-left:3px solid #2c6dd5;padding-left:10px;margin-bottom:12px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],textarea,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}.cancel-btn:hover{background-color:#0052cc!important;color:#fff!important}.save-btn{flex:1;background-color:#0052cc;color:#fff;margin-right:10px}.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;width:35px;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: [{
@@ -62411,6 +63534,201 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: ['document:click', ['$event']]
             }] } });
 
+class BookletComponent {
+    referenceKey;
+    questions = [];
+    isPreview = false;
+    currencySymbol = '';
+    questionChange = new EventEmitter();
+    onQuestionChange(value, field) {
+        this.questionChange.emit({ value, field });
+    }
+    isVisible(field) {
+        return !!field && field.hideInPdf !== true && field.isHidden !== true;
+    }
+    getElementStyle(field) {
+        const style = field?.style || {};
+        return {
+            width: `${field?.width || 100}%`,
+            'font-family': style.font || 'Helvetica Neue',
+            'font-size': `${Number(style.fontSize) || Number(field?.fontSize) || 12}px`,
+            'font-weight': style.bold ? '700' : (style.fontWeight || field?.fontWeight || '400'),
+            'font-style': style.italic ? 'italic' : 'normal',
+            color: style.color || '#000000',
+            'text-align': style.alignment || 'left',
+            'background-color': style.fillColor || style.backgroundColor || 'transparent',
+            padding: this.marginToCss(style.margin || field?.margin || [0, 0, 0, 0]),
+            'line-height': style.lineHeight || 1.25,
+            'letter-spacing': `${Number(style.characterSpacing) || 0}px`,
+            'text-decoration': style.decoration === 'lineThrough' ? 'line-through' : (style.decoration || 'none'),
+            opacity: style.opacity ?? 1,
+            border: style.borderColor ? `1px solid ${style.borderColor}` : 'none',
+            '--booklet-heading-color': style.headingColor || style.color || '#2f9e44'
+        };
+    }
+    getLabelStyle(field) {
+        const style = field?.style || {};
+        return {
+            color: style.labelColor || style.color || '#222222',
+            'font-size': `${Number(style.labelFontSize) || Number(style.fontSize) || 12}px`,
+            'font-weight': style.labelBold === false ? '400' : '700',
+            'text-align': style.alignment || 'left'
+        };
+    }
+    getValue(field) {
+        if (!field)
+            return '';
+        if (field.type === 'currency') {
+            return this.formatCurrency(field.value, field);
+        }
+        if (field.type === 'boolean') {
+            return field.value === true || field.value === 'true' ? 'Yes' : 'No';
+        }
+        return field.value ?? '';
+    }
+    getMainColumns(field) {
+        const columns = Array.isArray(field?.fieldsMeta) ? field.fieldsMeta : [];
+        return columns.filter(column => column?.hideInPdf !== true && column?.isHidden !== true && column?.summaryRow !== true);
+    }
+    getSummaryColumns(field) {
+        const columns = Array.isArray(field?.fieldsMeta) ? field.fieldsMeta : [];
+        return columns.filter(column => column?.hideInPdf !== true && column?.isHidden !== true && column?.summaryRow === true);
+    }
+    getRows(field) {
+        return field?.value?.data || [];
+    }
+    getHeaderStyle(column) {
+        const style = column?.style || {};
+        return {
+            'background-color': style.fillColor || '#f1f5f9',
+            color: style.color || '#111827',
+            'text-align': style.alignment || 'left',
+            width: this.getColumnWidth(column)
+        };
+    }
+    getCellStyle(column, rowIndex) {
+        const style = column?.style || {};
+        return {
+            'text-align': style.alignment || (column?.fldType === 'currency' ? 'right' : 'left'),
+            width: this.getColumnWidth(column),
+            'background-color': rowIndex % 2 === 1 ? '#f8fafc' : '#ffffff',
+            color: style.cellColor || '#374151'
+        };
+    }
+    getSummaryColspan(field) {
+        return Math.max(this.getMainColumns(field).length - 1, 1);
+    }
+    getCellValue(row, column) {
+        const value = this.getPathValue(row, column?.apiName);
+        if (column?.fldType === 'currency') {
+            return this.formatCurrency(value, column);
+        }
+        return value ?? '';
+    }
+    getSummaryValue(field, column) {
+        const summaryValues = field?.value?.summaryValues || field?.value?.summaryValue || {};
+        const value = this.getPathValue(summaryValues, column?.apiName);
+        if (column?.fldType === 'currency') {
+            return this.formatCurrency(value, column);
+        }
+        return value ?? '';
+    }
+    getRichTextLines(field) {
+        return String(field?.value || '').split(/\r?\n/).filter(line => line.trim().length > 0);
+    }
+    shouldRenderStyledTextLines(field) {
+        return field?.type === 'text' && (field?.headingFirstLine === true || this.isQuotationHeadingText(field));
+    }
+    getStyledTextLines(field) {
+        return String(this.getValue(field) || '').split(/\r?\n/);
+    }
+    isTextHeadingLine(field, index, line) {
+        return (field?.headingFirstLine === true || this.isQuotationHeadingText(field)) && index === 0 && String(line || '').trim().length > 0;
+    }
+    getStyledTextLineStyle(field, index, line) {
+        const style = field?.style || {};
+        if (this.isTextHeadingLine(field, index, line)) {
+            return {
+                color: style.headingColor || this.getDefaultTextHeadingColor(field) || style.color || '#2f9e44',
+                'font-size': `${Number(style.headingFontSize) || this.getDefaultTextHeadingSize(field) || Number(style.fontSize) || 12}px`,
+                'font-weight': style.headingBold === false || (style.headingBold === undefined && this.isQuotationHeadingText(field)) ? '400' : '700',
+                margin: this.marginToCss(style.headingMargin || [0, 0, 0, 2])
+            };
+        }
+        if (!line) {
+            return {
+                height: `${Number(style.blankLineHeight) || 10}px`,
+                'min-height': `${Number(style.blankLineHeight) || 10}px`
+            };
+        }
+        return {};
+    }
+    isQuotationHeadingText(field) {
+        const firstLine = String(field?.value || '').split(/\r?\n/)[0]?.trim();
+        return firstLine === 'VALAR HR' || firstLine === 'QUOTATION';
+    }
+    getDefaultTextHeadingColor(field) {
+        return this.isQuotationHeadingText(field) ? '#3fa34d' : '';
+    }
+    getDefaultTextHeadingSize(field) {
+        return this.isQuotationHeadingText(field) ? 24 : 0;
+    }
+    isRichTextBullet(line) {
+        return /^[•*-]\s+/.test(line.trim());
+    }
+    getRichTextLineText(line) {
+        return line.trim().replace(/^[•*-]\s+/, '');
+    }
+    isRichTextHeading(field, index, line) {
+        return field?.headingFirstLine !== false && index === 0 && !this.isRichTextBullet(line);
+    }
+    getPdfMakePreview(field) {
+        return field?.pdfMakeContent || field?.value || '';
+    }
+    getColumnWidth(column) {
+        const width = column?.style?.width;
+        return typeof width === 'number' ? `${width}px` : 'auto';
+    }
+    formatCurrency(value, field) {
+        if (value === undefined || value === null || value === '')
+            return '';
+        if (field && Object.prototype.hasOwnProperty.call(field, 'currencySymbol')) {
+            return `${field.currencySymbol ? field.currencySymbol + ' ' : ''}${value}`;
+        }
+        return `${this.currencySymbol || ''}${this.currencySymbol ? ' ' : ''}${value}`;
+    }
+    getPathValue(data, path) {
+        if (!data || !path)
+            return undefined;
+        return path.split('.').reduce((obj, key) => obj?.[key], data);
+    }
+    normalizeMargin(margin) {
+        if (!Array.isArray(margin))
+            return [0, 0, 0, 0];
+        return [0, 1, 2, 3].map(index => Number(margin[index]) || 0);
+    }
+    marginToCss(margin) {
+        const normalized = this.normalizeMargin(margin);
+        return `${normalized[1]}px ${normalized[2]}px ${normalized[3]}px ${normalized[0]}px`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BookletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: BookletComponent, isStandalone: true, selector: "app-booklet", inputs: { referenceKey: "referenceKey", questions: "questions", isPreview: "isPreview", currencySymbol: "currencySymbol" }, outputs: { questionChange: "questionChange" }, ngImport: i0, template: "<div class=\"booklet-renderer\" [attr.data-reference]=\"referenceKey\">\n  <ng-container *ngFor=\"let field of questions\">\n    <div *ngIf=\"isVisible(field)\" class=\"booklet-field\" [ngStyle]=\"getElementStyle(field)\">\n      <ng-container [ngSwitch]=\"field?.type\">\n        <div *ngSwitchCase=\"'Line'\" class=\"booklet-line\"></div>\n\n        <div *ngSwitchCase=\"'Space'\" class=\"booklet-space\"></div>\n\n        <div *ngSwitchCase=\"'Section'\" class=\"booklet-section\">\n          {{ getValue(field) }}\n        </div>\n\n        <div *ngSwitchCase=\"'Note'\" class=\"booklet-note\">\n          {{ getValue(field) }}\n        </div>\n\n        <div *ngSwitchCase=\"'RichText'\" class=\"booklet-richtext\">\n          <ng-container *ngFor=\"let line of getRichTextLines(field); let lineIndex = index\">\n            <div *ngIf=\"isRichTextHeading(field, lineIndex, line)\" class=\"booklet-richtext-heading\">\n              {{ getRichTextLineText(line) }}\n            </div>\n            <div *ngIf=\"!isRichTextHeading(field, lineIndex, line) && !isRichTextBullet(line)\" class=\"booklet-richtext-line\">\n              {{ line }}\n            </div>\n            <div *ngIf=\"isRichTextBullet(line)\" class=\"booklet-richtext-bullet\">\n              <span>\u2022</span>\n              <span>{{ getRichTextLineText(line) }}</span>\n            </div>\n          </ng-container>\n        </div>\n\n        <div *ngSwitchCase=\"'PageBreak'\" class=\"booklet-pagebreak\">\n          Page break\n        </div>\n\n        <div *ngSwitchCase=\"'PdfMake'\" class=\"booklet-pdfmake\">\n          <div>Advanced pdfmake content</div>\n          <pre>{{ getPdfMakePreview(field) }}</pre>\n        </div>\n\n        <div *ngSwitchCase=\"'image'\" class=\"booklet-image\" [style.text-align]=\"field?.style?.alignment || 'left'\">\n          <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"booklet-label\" [ngStyle]=\"getLabelStyle(field)\">\n            {{ field.questionText }}\n          </div>\n          <img *ngIf=\"field?.imageData\" [src]=\"field.imageData\" [style.width.px]=\"field?.imageSize?.width || 100\" [style.height.px]=\"field?.imageSize?.height || 100\" />\n        </div>\n\n        <div *ngSwitchCase=\"'signaturePad'\" class=\"booklet-image\" [style.text-align]=\"field?.style?.alignment || 'left'\">\n          <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"booklet-label\" [ngStyle]=\"getLabelStyle(field)\">\n            {{ field.questionText }}\n          </div>\n          <img *ngIf=\"field?.value\" [src]=\"field.value\" [style.width.px]=\"field?.imageSize?.width || 250\" [style.height.px]=\"field?.imageSize?.height || 90\" />\n        </div>\n\n        <div *ngSwitchCase=\"'Table'\" class=\"booklet-table-wrap\">\n          <table class=\"booklet-table\">\n            <thead>\n              <tr>\n                <th *ngFor=\"let column of getMainColumns(field)\" [ngStyle]=\"getHeaderStyle(column)\">\n                  {{ column.label }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let row of getRows(field); let rowIndex = index\">\n                <td *ngFor=\"let column of getMainColumns(field)\" [ngStyle]=\"getCellStyle(column, rowIndex)\">\n                  {{ getCellValue(row, column) }}\n                </td>\n              </tr>\n              <tr *ngFor=\"let summary of getSummaryColumns(field)\" class=\"booklet-summary-row\">\n                <td [attr.colspan]=\"getSummaryColspan(field)\" class=\"booklet-summary-label\">\n                  {{ summary.label }}\n                </td>\n                <td class=\"booklet-summary-value\" [style.text-align]=\"summary?.style?.alignment || 'right'\">\n                  {{ getSummaryValue(field, summary) }}\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n\n        <app-booklet\n          *ngSwitchCase=\"'Pdf'\"\n          [referenceKey]=\"field?.pdfReference\"\n          [questions]=\"field?.pdfReferenceQuestions?.[field?.pdfReference] || []\"\n          [isPreview]=\"isPreview\"\n          [currencySymbol]=\"currencySymbol\"\n          (questionChange)=\"onQuestionChange($event.value, $event.field)\">\n        </app-booklet>\n\n        <div *ngSwitchDefault class=\"booklet-text\">\n          <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"booklet-label\" [ngStyle]=\"getLabelStyle(field)\">\n            {{ field.questionText }}\n          </div>\n          <ng-container *ngIf=\"shouldRenderStyledTextLines(field); else plainBookletValue\">\n            <div *ngFor=\"let line of getStyledTextLines(field); let lineIndex = index\"\n              class=\"booklet-value\"\n              [class.booklet-text-heading-line]=\"isTextHeadingLine(field, lineIndex, line)\"\n              [class.booklet-text-empty-line]=\"!line\"\n              [ngStyle]=\"getStyledTextLineStyle(field, lineIndex, line)\">\n              {{ line || ' ' }}\n            </div>\n          </ng-container>\n          <ng-template #plainBookletValue>\n            <div class=\"booklet-value\">{{ getValue(field) }}</div>\n          </ng-template>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: [".booklet-renderer{display:flex;flex-wrap:wrap;width:100%;align-items:flex-start}.booklet-field{box-sizing:border-box;min-width:0;white-space:pre-wrap}.booklet-label{margin-bottom:2px}.booklet-value{min-height:16px}.booklet-text-heading-line{line-height:1.05}.booklet-text-empty-line{font-size:0}.booklet-line{width:100%;border-top:1px solid currentColor;min-height:1px}.booklet-space{width:100%;min-height:24px}.booklet-section{width:100%;min-height:32px;box-sizing:border-box}.booklet-note{width:100%;min-height:34px;border:1px solid currentColor;box-sizing:border-box}.booklet-richtext{width:100%;white-space:normal}.booklet-richtext-heading{color:var(--booklet-heading-color, #2f9e44);font-weight:600;margin-bottom:8px}.booklet-richtext-line{margin-bottom:7px}.booklet-richtext-bullet{display:grid;grid-template-columns:14px minmax(0,1fr);gap:4px;margin-bottom:7px}.booklet-pagebreak{width:100%;min-height:42px;display:flex;align-items:center;justify-content:center;border:1px dashed #94a3b8;color:#64748b;background:#f8fafc;font-size:11px;text-transform:uppercase}.booklet-pdfmake{width:100%;border:1px dashed #94a3b8;background:#f8fafc;color:#334155;padding:10px;box-sizing:border-box}.booklet-pdfmake div{font-size:11px;font-weight:700;margin-bottom:6px}.booklet-pdfmake pre{margin:0;max-height:160px;overflow:auto;white-space:pre-wrap;font-size:11px}.booklet-image img{display:inline-block;object-fit:contain;max-width:100%}.booklet-table-wrap{width:100%;overflow-x:auto}.booklet-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:inherit}.booklet-table th,.booklet-table td{border:1px solid #cfd8d1;padding:6px;vertical-align:top;overflow-wrap:anywhere}.booklet-summary-row td{border-color:transparent;background:transparent}.booklet-summary-label{color:#555;text-align:right}.booklet-summary-value{color:#222;font-weight:600}\n"], dependencies: [{ kind: "component", type: BookletComponent, selector: "app-booklet", inputs: ["referenceKey", "questions", "isPreview", "currencySymbol"], outputs: ["questionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: BookletComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-booklet', standalone: true, imports: [CommonModule], template: "<div class=\"booklet-renderer\" [attr.data-reference]=\"referenceKey\">\n  <ng-container *ngFor=\"let field of questions\">\n    <div *ngIf=\"isVisible(field)\" class=\"booklet-field\" [ngStyle]=\"getElementStyle(field)\">\n      <ng-container [ngSwitch]=\"field?.type\">\n        <div *ngSwitchCase=\"'Line'\" class=\"booklet-line\"></div>\n\n        <div *ngSwitchCase=\"'Space'\" class=\"booklet-space\"></div>\n\n        <div *ngSwitchCase=\"'Section'\" class=\"booklet-section\">\n          {{ getValue(field) }}\n        </div>\n\n        <div *ngSwitchCase=\"'Note'\" class=\"booklet-note\">\n          {{ getValue(field) }}\n        </div>\n\n        <div *ngSwitchCase=\"'RichText'\" class=\"booklet-richtext\">\n          <ng-container *ngFor=\"let line of getRichTextLines(field); let lineIndex = index\">\n            <div *ngIf=\"isRichTextHeading(field, lineIndex, line)\" class=\"booklet-richtext-heading\">\n              {{ getRichTextLineText(line) }}\n            </div>\n            <div *ngIf=\"!isRichTextHeading(field, lineIndex, line) && !isRichTextBullet(line)\" class=\"booklet-richtext-line\">\n              {{ line }}\n            </div>\n            <div *ngIf=\"isRichTextBullet(line)\" class=\"booklet-richtext-bullet\">\n              <span>\u2022</span>\n              <span>{{ getRichTextLineText(line) }}</span>\n            </div>\n          </ng-container>\n        </div>\n\n        <div *ngSwitchCase=\"'PageBreak'\" class=\"booklet-pagebreak\">\n          Page break\n        </div>\n\n        <div *ngSwitchCase=\"'PdfMake'\" class=\"booklet-pdfmake\">\n          <div>Advanced pdfmake content</div>\n          <pre>{{ getPdfMakePreview(field) }}</pre>\n        </div>\n\n        <div *ngSwitchCase=\"'image'\" class=\"booklet-image\" [style.text-align]=\"field?.style?.alignment || 'left'\">\n          <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"booklet-label\" [ngStyle]=\"getLabelStyle(field)\">\n            {{ field.questionText }}\n          </div>\n          <img *ngIf=\"field?.imageData\" [src]=\"field.imageData\" [style.width.px]=\"field?.imageSize?.width || 100\" [style.height.px]=\"field?.imageSize?.height || 100\" />\n        </div>\n\n        <div *ngSwitchCase=\"'signaturePad'\" class=\"booklet-image\" [style.text-align]=\"field?.style?.alignment || 'left'\">\n          <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"booklet-label\" [ngStyle]=\"getLabelStyle(field)\">\n            {{ field.questionText }}\n          </div>\n          <img *ngIf=\"field?.value\" [src]=\"field.value\" [style.width.px]=\"field?.imageSize?.width || 250\" [style.height.px]=\"field?.imageSize?.height || 90\" />\n        </div>\n\n        <div *ngSwitchCase=\"'Table'\" class=\"booklet-table-wrap\">\n          <table class=\"booklet-table\">\n            <thead>\n              <tr>\n                <th *ngFor=\"let column of getMainColumns(field)\" [ngStyle]=\"getHeaderStyle(column)\">\n                  {{ column.label }}\n                </th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr *ngFor=\"let row of getRows(field); let rowIndex = index\">\n                <td *ngFor=\"let column of getMainColumns(field)\" [ngStyle]=\"getCellStyle(column, rowIndex)\">\n                  {{ getCellValue(row, column) }}\n                </td>\n              </tr>\n              <tr *ngFor=\"let summary of getSummaryColumns(field)\" class=\"booklet-summary-row\">\n                <td [attr.colspan]=\"getSummaryColspan(field)\" class=\"booklet-summary-label\">\n                  {{ summary.label }}\n                </td>\n                <td class=\"booklet-summary-value\" [style.text-align]=\"summary?.style?.alignment || 'right'\">\n                  {{ getSummaryValue(field, summary) }}\n                </td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n\n        <app-booklet\n          *ngSwitchCase=\"'Pdf'\"\n          [referenceKey]=\"field?.pdfReference\"\n          [questions]=\"field?.pdfReferenceQuestions?.[field?.pdfReference] || []\"\n          [isPreview]=\"isPreview\"\n          [currencySymbol]=\"currencySymbol\"\n          (questionChange)=\"onQuestionChange($event.value, $event.field)\">\n        </app-booklet>\n\n        <div *ngSwitchDefault class=\"booklet-text\">\n          <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"booklet-label\" [ngStyle]=\"getLabelStyle(field)\">\n            {{ field.questionText }}\n          </div>\n          <ng-container *ngIf=\"shouldRenderStyledTextLines(field); else plainBookletValue\">\n            <div *ngFor=\"let line of getStyledTextLines(field); let lineIndex = index\"\n              class=\"booklet-value\"\n              [class.booklet-text-heading-line]=\"isTextHeadingLine(field, lineIndex, line)\"\n              [class.booklet-text-empty-line]=\"!line\"\n              [ngStyle]=\"getStyledTextLineStyle(field, lineIndex, line)\">\n              {{ line || ' ' }}\n            </div>\n          </ng-container>\n          <ng-template #plainBookletValue>\n            <div class=\"booklet-value\">{{ getValue(field) }}</div>\n          </ng-template>\n        </div>\n      </ng-container>\n    </div>\n  </ng-container>\n</div>\n", styles: [".booklet-renderer{display:flex;flex-wrap:wrap;width:100%;align-items:flex-start}.booklet-field{box-sizing:border-box;min-width:0;white-space:pre-wrap}.booklet-label{margin-bottom:2px}.booklet-value{min-height:16px}.booklet-text-heading-line{line-height:1.05}.booklet-text-empty-line{font-size:0}.booklet-line{width:100%;border-top:1px solid currentColor;min-height:1px}.booklet-space{width:100%;min-height:24px}.booklet-section{width:100%;min-height:32px;box-sizing:border-box}.booklet-note{width:100%;min-height:34px;border:1px solid currentColor;box-sizing:border-box}.booklet-richtext{width:100%;white-space:normal}.booklet-richtext-heading{color:var(--booklet-heading-color, #2f9e44);font-weight:600;margin-bottom:8px}.booklet-richtext-line{margin-bottom:7px}.booklet-richtext-bullet{display:grid;grid-template-columns:14px minmax(0,1fr);gap:4px;margin-bottom:7px}.booklet-pagebreak{width:100%;min-height:42px;display:flex;align-items:center;justify-content:center;border:1px dashed #94a3b8;color:#64748b;background:#f8fafc;font-size:11px;text-transform:uppercase}.booklet-pdfmake{width:100%;border:1px dashed #94a3b8;background:#f8fafc;color:#334155;padding:10px;box-sizing:border-box}.booklet-pdfmake div{font-size:11px;font-weight:700;margin-bottom:6px}.booklet-pdfmake pre{margin:0;max-height:160px;overflow:auto;white-space:pre-wrap;font-size:11px}.booklet-image img{display:inline-block;object-fit:contain;max-width:100%}.booklet-table-wrap{width:100%;overflow-x:auto}.booklet-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:inherit}.booklet-table th,.booklet-table td{border:1px solid #cfd8d1;padding:6px;vertical-align:top;overflow-wrap:anywhere}.booklet-summary-row td{border-color:transparent;background:transparent}.booklet-summary-label{color:#555;text-align:right}.booklet-summary-value{color:#222;font-weight:600}\n"] }]
+        }], propDecorators: { referenceKey: [{
+                type: Input
+            }], questions: [{
+                type: Input
+            }], isPreview: [{
+                type: Input
+            }], currencySymbol: [{
+                type: Input
+            }], questionChange: [{
+                type: Output
+            }] } });
+
 class PdfDesignerComponent {
     dataService;
     changeService;
@@ -62424,9 +63742,11 @@ class PdfDesignerComponent {
     from;
     dataBind;
     isPropertyHide = false;
+    pdfDefinitionOptions = {};
     pdfSaveHandlerEmit = new EventEmitter();
     templateMode = new EventEmitter();
     pdfPreviewEmit = new EventEmitter();
+    pdfOutputEmit = new EventEmitter();
     field;
     pdfElements = [];
     elements = [];
@@ -62529,62 +63849,52 @@ class PdfDesignerComponent {
             });
         }
     }
-    async handleQues(ques) {
-        if (this.dataBind && Object.keys(this.dataBind).length > 0) {
-            let value = undefined;
-            if (Array.isArray(ques.referenceField)) {
-                value = '';
-                for (const rf of ques.referenceField) {
-                    value += this.dataService.getValue(this.dataBind, rf) + ' ';
-                }
+    handleQues(ques, dataBind = this.dataBind) {
+        if (dataBind && Object.keys(dataBind).length > 0) {
+            const questionType = (ques.type || '').toString().toLowerCase();
+            const value = this.getBoundTemplateValue(ques.referenceTemplate || ques.bindingTemplate, dataBind)
+                ?? this.getBoundReferencePartsValue(ques.referenceParts || ques.referenceFields, dataBind)
+                ?? this.getBoundReferenceValue(ques.referenceField, ques.referenceJoiner, dataBind);
+            const hasValue = this.hasBindableValue(value);
+            if (questionType === 'pdf' && ques.pdfReferenceQuestions) {
+                // HA 24JAN24 Fetching from QB reference
+                ques.pdfReferenceQuestions = typeof ques.pdfReferenceQuestions === 'object' ? ques.pdfReferenceQuestions : JSON.parse(ques.pdfReferenceQuestions);
+                ques.pdfReferenceQuestions?.[ques.pdfReference]?.forEach(inQues => {
+                    this.handleQues(inQues, dataBind);
+                });
             }
-            else {
-                value = this.dataService.getValue(this.dataBind, ques.referenceField);
+            else if (questionType === 'table') {
+                const rows = hasValue ? this.getBoundTableRows(value) : this.getBoundTableRows(ques.value);
+                const summaryValues = this.buildTableSummaryValues(ques, rows, dataBind);
+                if (hasValue || Object.keys(summaryValues).length > 0) {
+                    ques.value = Object.keys(summaryValues).length > 0
+                        ? { data: rows, summaryValues, summaryValue: summaryValues }
+                        : { data: rows };
+                }
             }
-            if (value) {
-                if (ques.type === 'Dropdown' || ques.type === 'MultiSelect' || ques.type === 'Radio') {
-                    ques.value = value || ques.value;
-                    ques.selectedValue = value || ques.value;
+            else if (hasValue) {
+                if (['dropdown', 'multiselect', 'radio'].includes(questionType)) {
+                    ques.value = value;
+                    ques.selectedValue = value;
                 }
-                else if (ques.type === 'Date' || ques.type == 'DateTime') {
+                else if (questionType === 'date' || questionType === 'datetime') {
                     ques.value = new Date(value?.toString()) || ques.value;
                 }
-                else if (ques.type === 'Location') {
-                    ques.value = value['address'] ? value['address'] : value || ques.value;
+                else if (questionType === 'location') {
+                    ques.value = value?.['address'] ? value['address'] : value;
                 }
-                else if (ques.type === "Boolean") {
-                    ques.value = typeof value !== 'undefined' ? value === true || value === 'true' : typeof ques.value !== 'undefined' ? ques.value === true || ques.value === 'true' : false;
+                else if (questionType === 'boolean') {
+                    ques.value = value === true || value === 'true';
                 }
-                else if (ques.type === "image") {
+                else if (questionType === 'image') {
                     ques.imageData = value || ques.imageData;
                 }
-                else if (ques.type === "Table") {
-                    let summaryValue = {};
-                    if (ques.summaryValuesReferenceField) {
-                        if (Array.isArray(ques.summaryValuesReferenceField)) {
-                            for (const smrf of ques.summaryValuesReferenceField) {
-                                summaryValue[smrf] = this.dataService.getValue(this.dataBind, smrf);
-                            }
-                        }
-                        else {
-                            summaryValue = { [ques.summaryValuesReferenceField]: this.dataService.getValue(this.dataBind, ques.summaryValuesReferenceField) };
-                        }
-                    }
-                    ques.value = value && Object.keys(summaryValue).length > 0 ? { data: value, summaryValue: summaryValue } : value ? { data: value } : ques.value;
-                }
                 else {
-                    ques.value = value || ques.value;
+                    ques.value = value;
                 }
             }
-            else if (ques.type === 'Pdf' && ques.pdfReferenceQuestions) {
-                // HA 24JAN24 Fetching from QB reference
-                ques.pdfReferenceQuestions = typeof ques.pdfReferenceQuestions === 'object' ? ques.pdfReferenceQuestions : JSON.parse(ques.pdfReferenceQuestions);
-                ques.pdfReferenceQuestions?.[ques.pdfReference]?.forEach(inQues => {
-                    this.handleQues(inQues);
-                });
-            }
             else {
-                if (ques.type === 'Boolean') {
+                if (questionType === 'boolean') {
                     ques.value = typeof ques.value !== 'undefined' ? ques.value === true || ques.value === 'true' : false;
                 }
                 else {
@@ -62613,6 +63923,151 @@ class PdfDesignerComponent {
             question['selectedValue'] = ques?.selectedValue;
         }
     }
+    // SKS26MAY26 databind
+    getBoundReferenceValue(referenceField, referenceJoiner = ' ', dataBind = this.dataBind) {
+        if (!referenceField)
+            return undefined;
+        if (Array.isArray(referenceField)) {
+            return referenceField
+                .map((fieldPath) => this.dataService.getValue(dataBind, fieldPath))
+                .filter(value => this.hasBindableValue(value))
+                .join(referenceJoiner || ' ');
+        }
+        return this.dataService.getValue(dataBind, referenceField);
+    }
+    getBoundReferencePartsValue(referenceParts, dataBind = this.dataBind) {
+        if (!Array.isArray(referenceParts) || referenceParts.length === 0)
+            return undefined;
+        let output = '';
+        referenceParts.forEach((part) => {
+            if (typeof part === 'string') {
+                const value = this.dataService.getValue(dataBind, part);
+                if (this.hasBindableValue(value)) {
+                    output += String(value);
+                }
+                return;
+            }
+            if (part?.text !== undefined) {
+                output += String(part.text);
+                return;
+            }
+            const fieldPath = part?.field || part?.referenceField || part?.path;
+            const value = this.getBoundReferenceValue(fieldPath, part?.referenceJoiner, dataBind);
+            if (!this.hasBindableValue(value)) {
+                if (part?.fallback !== undefined) {
+                    output += `${part.prefix || ''}${part.fallback}${part.suffix || part.after || ''}`;
+                }
+                return;
+            }
+            output += `${part.prefix || ''}${value}${part.suffix || part.after || ''}`;
+        });
+        return output
+            .replace(/[ \t]+\n/g, '\n')
+            .replace(/\n{3,}/g, '\n\n')
+            .trim();
+    }
+    // SKS26MAY26 databind template
+    getBoundTemplateValue(template, dataBind = this.dataBind) {
+        if (!template || typeof template !== 'string')
+            return undefined;
+        return template.replace(/\{\{\s*([^}|]+?)(?:\s*\|\s*([^}]+?))?\s*\}\}/g, (_match, fieldPath, pipeName) => {
+            const value = this.dataService.getValue(dataBind, fieldPath.trim());
+            if (!this.hasBindableValue(value))
+                return '';
+            if ((pipeName || '').trim().toLowerCase() === 'date') {
+                return this.formatBoundDateValue(value);
+            }
+            return String(value);
+        });
+    }
+    formatBoundDateValue(value) {
+        const dateValue = new Date(value);
+        if (Number.isNaN(dateValue.getTime()))
+            return String(value);
+        return dateValue.toLocaleDateString('en-GB');
+    }
+    hasBindableValue(value) {
+        if (value === undefined || value === null)
+            return false;
+        if (typeof value === 'string')
+            return value.length > 0;
+        if (Array.isArray(value))
+            return value.length > 0;
+        return true;
+    }
+    getBoundTableRows(value) {
+        if (Array.isArray(value))
+            return value;
+        if (Array.isArray(value?.data))
+            return value.data;
+        return [];
+    }
+    // SKS26MAY26 table summary data bind
+    buildTableSummaryValues(ques, rows, dataBind = this.dataBind) {
+        const summaryValues = {};
+        const refs = ques.summaryValuesReferenceField;
+        const setSummaryValue = (apiName, referenceField) => {
+            if (!apiName || !referenceField)
+                return;
+            const value = this.dataService.getValue(dataBind, referenceField);
+            if (this.hasBindableValue(value)) {
+                summaryValues[apiName] = value;
+            }
+        };
+        if (Array.isArray(refs)) {
+            refs.forEach((ref) => {
+                if (typeof ref === 'string') {
+                    setSummaryValue(ref, ref);
+                }
+                else if (ref && typeof ref === 'object') {
+                    setSummaryValue(ref.apiName || ref.name || ref.key, ref.referenceField || ref.field || ref.path);
+                }
+            });
+        }
+        else if (typeof refs === 'string') {
+            setSummaryValue(refs, refs);
+        }
+        else if (refs && typeof refs === 'object') {
+            Object.keys(refs).forEach(apiName => setSummaryValue(apiName, refs[apiName]));
+        }
+        (ques.fieldsMeta || [])
+            .filter((column) => column?.summaryRow && column?.apiName && !this.hasBindableValue(summaryValues[column.apiName]))
+            .forEach((column) => {
+            const computedValue = this.computeTableSummaryValue(column, rows, summaryValues, dataBind);
+            if (this.hasBindableValue(computedValue)) {
+                summaryValues[column.apiName] = computedValue;
+            }
+        });
+        return summaryValues;
+    }
+    // SKS26MAY26 table summary column data bind
+    computeTableSummaryValue(column, rows, summaryValues, dataBind = this.dataBind) {
+        const operation = (column?.operation || '').toString().toLowerCase();
+        if (operation === 'sum' && column?.column) {
+            return rows.reduce((total, row) => total + this.toNumericValue(this.dataService.getValue(row, column.column)), 0);
+        }
+        if (operation === 'subtract' && Array.isArray(column?.operands) && column.operands.length > 0) {
+            const [first, ...rest] = column.operands.map((operand) => this.resolveSummaryOperand(operand, rows, summaryValues, dataBind));
+            return rest.reduce((total, value) => total - value, first);
+        }
+        return undefined;
+    }
+    resolveSummaryOperand(operand, rows, summaryValues, dataBind = this.dataBind) {
+        if (this.hasBindableValue(summaryValues?.[operand])) {
+            return this.toNumericValue(summaryValues[operand]);
+        }
+        const rootValue = this.dataService.getValue(dataBind, operand);
+        if (this.hasBindableValue(rootValue)) {
+            return this.toNumericValue(rootValue);
+        }
+        return rows.reduce((total, row) => total + this.toNumericValue(this.dataService.getValue(row, operand)), 0);
+    }
+    toNumericValue(value) {
+        if (typeof value === 'number')
+            return Number.isFinite(value) ? value : 0;
+        const numericValue = Number(String(value ?? '').replace(/[^0-9.-]/g, ''));
+        return Number.isFinite(numericValue) ? numericValue : 0;
+    }
     //AP-14JUN25 - Calculates contrast text color (black or white) based on background color
     getContrastColor(bgColor = '#000000') {
         // Convert hex to RGB
@@ -62640,15 +64095,21 @@ class PdfDesignerComponent {
             { "type": "image", "img": "Image", "label": "Image" },
             { "type": "Line", "img": "line", "label": "Line" },
             { "type": "Space", "img": "space", "label": "Space" },
+            { "type": "Section", "img": "TextArea", "label": "Section Bar" },
+            { "type": "RichText", "img": "TextArea", "label": "Rich Text" },
+            { "type": "Note", "img": "Text", "label": "Note Box" },
+            { "type": "PageBreak", "img": "space", "label": "Page Break" },
             { "type": "Table", "img": "Table", "label": "Table" },
             { "type": "Pdf", "img": "Search", "label": "Pdf" },
+            { "type": "PdfMake", "img": "Search", "label": "PdfMake JSON" },
             { "type": "signaturePad", "img": "space", "label": "Signature Pad" },
         ];
         this.elementDisabledArray = {
             Table: [
                 'Pdf', 'Calendar', "Boolean", 'List', 'Table', 'Checkbox', 'Radio',
                 'Dropdown', 'MultiSelect', 'RichTextArea', 'Number', 'Label', 'image',
-                'Email', 'Date', 'Time', 'DateTime', 'Line', 'Space'
+                'Email', 'Date', 'Time', 'DateTime', 'Line', 'Space', 'Section',
+                'RichText', 'Note', 'PageBreak', 'PdfMake'
             ]
         };
         if (!this.isPreview) {
@@ -62766,11 +64227,66 @@ class PdfDesignerComponent {
                 width: 100,
                 styleClass: unique_id,
             };
+            this.applyAdvancedElementDefaults(newElement);
             this.pdfDesignerService.addElement(newElement);
             this.pdfElements = this.pdfDesignerService.getElements();
             this.addTable = true;
         }
     }
+    // SKS26MAY26 direct pdf content insert
+    applyAdvancedElementDefaults(element) {
+        if (element.type === 'Section') {
+            element.value = element.value || 'Section Title';
+            element.style = {
+                ...element.style,
+                bold: true,
+                color: '#ffffff',
+                fillColor: '#2f9e44',
+                fontSize: 12,
+                margin: [0, 8, 0, 0]
+            };
+            element.innerMargin = [8, 6, 8, 6];
+        }
+        if (element.type === 'RichText') {
+            element.value = element.value || 'Scope of Work\n• First bullet point\n• Second bullet point';
+            element.headingFirstLine = true;
+            element.style = {
+                ...element.style,
+                color: '#555555',
+                headingColor: '#2f9e44',
+                fontSize: 11,
+                lineHeight: 1.35,
+                margin: [0, 8, 0, 8]
+            };
+        }
+        if (element.type === 'Note') {
+            element.value = element.value || 'Modules: CRM, ESS, Projects';
+            element.style = {
+                ...element.style,
+                color: '#555555',
+                fillColor: '#e7f2e8',
+                borderColor: '#2f9e44',
+                fontSize: 10,
+                margin: [0, 8, 0, 8]
+            };
+            element.innerMargin = [8, 6, 8, 6];
+        }
+        if (element.type === 'PageBreak') {
+            element.value = element.value || 'Page break';
+            element.pageBreak = 'after';
+            element.style = {
+                ...element.style,
+                color: '#64748b',
+                fontSize: 10,
+                margin: [0, 12, 0, 12]
+            };
+        }
+        if (element.type === 'PdfMake') {
+            element.value = element.value || 'Advanced pdfmake block';
+            element.pdfMakeContent = element.pdfMakeContent || JSON.stringify({ text: 'Advanced pdfmake content', margin: [0, 8, 0, 8] }, null, 2);
+            element.pdfMakeStyles = element.pdfMakeStyles || '{}';
+        }
+    }
     //AP-14JUN25 - Handles textarea input: auto-resizes and updates the field content
     onTextAreaInput(event, field) {
         const textarea = event.target;
@@ -62889,9 +64405,15 @@ class PdfDesignerComponent {
     addTableData(fieldId, fieldName) {
         // this.pdfDesignerService.addTablefieldData(tableElement);
     }
-    columnSelected(event) {
+    columnSelected(tableIndexOrEvent, event, mouseEvent) {
+        mouseEvent?.stopPropagation();
+        if (typeof tableIndexOrEvent === 'number') {
+            this.selectedFieldIndex = tableIndexOrEvent;
+            this.pdfDesignerService.setSelectedTableElement(tableIndexOrEvent, event);
+            return;
+        }
         // SKS19MAR25 table column update
-        this.pdfDesignerService.setSelectedTableElement(this.selectedFieldIndex, event);
+        this.pdfDesignerService.setSelectedTableElement(this.selectedFieldIndex, tableIndexOrEvent);
     }
     removeColumn(event) {
         this.pdfDesignerService.removeSelectedTableElement(this.selectedFieldIndex, event);
@@ -63009,15 +64531,19 @@ class PdfDesignerComponent {
         };
     }
     zoomOut() {
+        // SKS26MAY26 Decrease scale, ensure it doesn't go below a minimum (e.g., 0.1)
+        const newScale = Math.max((this.transform.scale || 1) - 0.1, 0.1);
         this.transform = {
             ...this.transform,
-            scale: this.transform.scale - .1
+            scale: newScale
         };
     }
     zoomIn() {
+        // SKS26MAY26 Increase scale
+        const newScale = (this.transform.scale || 1) + 0.1;
         this.transform = {
             ...this.transform,
-            scale: this.transform.scale + .1
+            scale: newScale
         };
     }
     rotateLeft() {
@@ -63135,15 +64661,22 @@ class PdfDesignerComponent {
     }
     pdfSaveHandler(event) {
         if (event === 'preview') {
-            this.pdfSaveHandlerEmit.emit({ "action": 'preview', "pdf": this.pdfDesignerService.downloadElement() });
+            this.pdfSaveHandlerEmit.emit(this.exportPdf('preview'));
         }
         else if (event === 'download') {
-            this.pdfSaveHandlerEmit.emit({ "action": 'download', "pdf": this.pdfDesignerService.downloadElement() });
+            this.pdfSaveHandlerEmit.emit(this.exportPdf('download'));
         }
         else {
             this.pdfSaveHandlerEmit.emit(event);
         }
     }
+    // SKS26MAY26 export pdf
+    exportPdf(action = 'definition', dataBind = this.dataBind) {
+        const sourceElements = this.pdfDesignerService.getElements()?.length ? this.pdfDesignerService.getElements() : this.pdfElements;
+        const payload = this.pdfDesignerService.buildPdfOutput(this.pdfDesignerService.getBook(), dataBind, this.pdfDefinitionOptions, action, sourceElements);
+        this.pdfOutputEmit.emit(payload);
+        return payload;
+    }
     // SKS12SEP25 color selection
     selectColor(color) {
         this.selectedColor = color;
@@ -63269,12 +64802,297 @@ class PdfDesignerComponent {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         field.value = '';
     }
+    //  SKS26MAY26 pdf setting 
+    getPdfSettings() {
+        if (!this.pdf) {
+            this.pdf = this.pdfDesignerService.getBook();
+        }
+        if (!this.pdf)
+            return {};
+        if (!this.pdf.pdfSettings) {
+            this.pdf.pdfSettings = this.pdfDesignerService.getDefaultPdfSettings();
+        }
+        return this.pdf.pdfSettings;
+    }
+    getPageBackgroundColor() {
+        return this.getPdfSettings()?.backgroundColor || '#ffffff';
+    }
+    getPageContentStyle() {
+        const margin = this.normalizeMargin(this.getPdfSettings()?.pageMargins || [40, 40, 40, 72]);
+        return {
+            'padding-left': `${margin[0]}px`,
+            'padding-top': `${margin[1]}px`,
+            'padding-right': `${margin[2]}px`,
+            'padding-bottom': `${margin[3]}px`
+        };
+    }
+    getWatermarkText() {
+        const watermark = this.getPdfSettings()?.watermark;
+        return watermark?.enabled ? (watermark?.text || '') : '';
+    }
+    getWatermarkStyle() {
+        const watermark = this.getPdfSettings()?.watermark || {};
+        return {
+            color: watermark.color || '#9ca3af',
+            opacity: watermark.opacity ?? 0.16,
+            'font-size': `${watermark.fontSize || 64}px`,
+            transform: `translate(-50%, -50%) rotate(${watermark.angle ?? -32}deg)`
+        };
+    }
+    shouldShowFooterOnCanvas() {
+        const footer = this.getPdfSettings()?.footer;
+        return !!footer?.enabled && !!(footer?.text || footer?.content || footer?.leftText || footer?.centerText || footer?.rightText);
+    }
+    shouldShowHeaderOnCanvas() {
+        const header = this.getPdfSettings()?.header;
+        return !!header?.enabled && !!(header?.text || header?.content || header?.leftText || header?.centerText || header?.rightText);
+    }
+    getHeaderStyle() {
+        const header = this.getPdfSettings()?.header || {};
+        const margin = this.normalizeMargin(header.margin || [40, 20, 40, 0]);
+        return {
+            left: `${margin[0]}px`,
+            right: `${margin[2]}px`,
+            top: `${margin[1]}px`,
+            color: header.color || '#666666',
+            'font-size': `${header.fontSize || 9}px`
+        };
+    }
+    getFooterStyle() {
+        const footer = this.getPdfSettings()?.footer || {};
+        const margin = this.normalizeMargin(footer.margin || [40, 12, 40, 0]);
+        return {
+            left: `${margin[0]}px`,
+            right: `${margin[2]}px`,
+            bottom: `${margin[3]}px`,
+            color: footer.color || '#666666',
+            'font-size': `${footer.fontSize || 9}px`,
+            'text-align': footer.alignment || 'center'
+        };
+    }
+    getRunningBandColumns(type) {
+        const settings = this.getPdfSettings()?.[type] || {};
+        if (settings.leftText || settings.centerText || settings.rightText) {
+            return [settings.leftText || '', settings.centerText || '', settings.rightText || ''];
+        }
+        return [settings.text || ''];
+    }
+    hasRunningBandBorder(type) {
+        const settings = this.getPdfSettings()?.[type] || {};
+        return type === 'header' ? !!settings.bottomBorder : !!settings.topBorder;
+    }
+    getRunningBandBorderStyle(type) {
+        const settings = this.getPdfSettings()?.[type] || {};
+        return {
+            'border-top': type === 'footer' && settings.topBorder ? `${settings.borderWidth || 1}px solid ${settings.borderColor || '#2f9e44'}` : null,
+            'border-bottom': type === 'header' && settings.bottomBorder ? `${settings.borderWidth || 1}px solid ${settings.borderColor || '#2f9e44'}` : null
+        };
+    }
+    getElementTextStyle(field) {
+        const style = field?.style || {};
+        return {
+            'font-family': style.font || 'Helvetica Neue',
+            'font-size': `${Number(style.fontSize) || Number(field?.fontSize) || 12}px`,
+            'font-weight': style.bold ? '700' : (style.fontWeight || field?.fontWeight || '400'),
+            'font-style': style.italic ? 'italic' : 'normal',
+            color: style.color || '#000000',
+            'text-align': style.alignment || 'left',
+            'background-color': style.fillColor || style.backgroundColor || 'transparent',
+            padding: this.marginToCss(style.margin || field?.margin || [0, 0, 0, 0]),
+            'line-height': style.lineHeight || 1.25,
+            'letter-spacing': `${Number(style.characterSpacing) || 0}px`,
+            'text-decoration': style.decoration === 'lineThrough' ? 'line-through' : (style.decoration || 'none'),
+            opacity: style.opacity ?? 1,
+            border: style.borderColor ? `1px solid ${style.borderColor}` : 'none',
+            '--pdf-heading-color': style.headingColor || style.color || '#2f9e44'
+        };
+    }
+    getElementLabelStyle(field) {
+        const style = field?.style || {};
+        return {
+            color: style.labelColor || style.color || '#222222',
+            'font-size': `${Number(style.labelFontSize) || Number(style.fontSize) || 12}px`,
+            'font-weight': style.labelBold === false ? '400' : '700',
+            'text-align': style.alignment || 'left'
+        };
+    }
+    displayFieldValue(field) {
+        if (!field)
+            return '';
+        if (field.type === 'currency') {
+            return this.formatCurrencyValue(field.value, field);
+        }
+        if (field.type === 'boolean') {
+            return field.value === true || field.value === 'true' ? 'Yes' : 'No';
+        }
+        return field.value ?? '';
+    }
+    shouldRenderStyledTextLines(field) {
+        return field?.type === 'text' && (field?.headingFirstLine === true || this.isQuotationHeadingText(field));
+    }
+    getStyledTextLines(field) {
+        return String(this.displayFieldValue(field) || '').split(/\r?\n/);
+    }
+    isTextHeadingLine(field, index, line) {
+        return (field?.headingFirstLine === true || this.isQuotationHeadingText(field)) && index === 0 && String(line || '').trim().length > 0;
+    }
+    getStyledTextLineStyle(field, index, line) {
+        const style = field?.style || {};
+        if (this.isTextHeadingLine(field, index, line)) {
+            return {
+                color: style.headingColor || this.getDefaultTextHeadingColor(field) || style.color || '#2f9e44',
+                'font-size': `${Number(style.headingFontSize) || this.getDefaultTextHeadingSize(field) || Number(style.fontSize) || 12}px`,
+                'font-weight': style.headingBold === false || (style.headingBold === undefined && this.isQuotationHeadingText(field)) ? '400' : '700',
+                margin: this.marginToCss(style.headingMargin || [0, 0, 0, 2])
+            };
+        }
+        if (!line) {
+            return {
+                height: `${Number(style.blankLineHeight) || 10}px`,
+                'min-height': `${Number(style.blankLineHeight) || 10}px`
+            };
+        }
+        return {};
+    }
+    isQuotationHeadingText(field) {
+        const firstLine = String(field?.value || '').split(/\r?\n/)[0]?.trim();
+        return firstLine === 'VALAR HR' || firstLine === 'QUOTATION';
+    }
+    getDefaultTextHeadingColor(field) {
+        return this.isQuotationHeadingText(field) ? '#3fa34d' : '';
+    }
+    getDefaultTextHeadingSize(field) {
+        return this.isQuotationHeadingText(field) ? 24 : 0;
+    }
+    getRichTextLines(field) {
+        return String(field?.value || '').split(/\r?\n/).filter(line => line.trim().length > 0);
+    }
+    isRichTextBullet(line) {
+        return /^[•*-]\s+/.test(line.trim());
+    }
+    getRichTextLineText(line) {
+        return line.trim().replace(/^[•*-]\s+/, '');
+    }
+    isRichTextHeading(field, index, line) {
+        return field?.headingFirstLine !== false && index === 0 && !this.isRichTextBullet(line);
+    }
+    getPdfMakePreview(field) {
+        return field?.pdfMakeContent || field?.value || '';
+    }
+    getMainTableColumns(field) {
+        const columns = Array.isArray(field?.fieldsMeta) ? field.fieldsMeta : [];
+        return columns.filter(column => column?.hideInPdf !== true && column?.isHidden !== true && column?.summaryRow !== true);
+    }
+    getSummaryTableColumns(field) {
+        const columns = Array.isArray(field?.fieldsMeta) ? field.fieldsMeta : [];
+        return columns.filter(column => column?.hideInPdf !== true && column?.isHidden !== true && column?.summaryRow === true);
+    }
+    getTableRows(field) {
+        return field?.value?.data || [];
+    }
+    getTableHeaderStyle(column) {
+        const style = column?.style || {};
+        return {
+            'background-color': style.fillColor || '#f1f5f9',
+            color: style.color || '#111827',
+            'text-align': style.alignment || 'left',
+            width: this.getColumnCssWidth(column)
+        };
+    }
+    getTableCellStyle(column, rowIndex) {
+        const style = column?.style || {};
+        return {
+            'text-align': style.alignment || (column?.fldType === 'currency' ? 'right' : 'left'),
+            width: this.getColumnCssWidth(column),
+            'background-color': rowIndex % 2 === 1 ? '#f8fafc' : '#ffffff',
+            color: style.cellColor || '#374151'
+        };
+    }
+    getTableSummaryLabelColspan(field) {
+        return Math.max(this.getMainTableColumns(field).length - 1, 1);
+    }
+    getColumnCssWidth(column) {
+        const width = column?.style?.width;
+        return typeof width === 'number' ? `${width}px` : 'auto';
+    }
+    getTableCellValue(row, column) {
+        const value = this.dataService.getValue(row, column?.apiName);
+        if (column?.fldType === 'currency') {
+            return this.formatCurrencyValue(value, column);
+        }
+        return value ?? '';
+    }
+    getTableSummaryValue(field, column) {
+        const summaryValues = field?.value?.summaryValues || field?.value?.summaryValue || {};
+        const value = this.dataService.getValue(summaryValues, column?.apiName);
+        if (column?.fldType === 'currency') {
+            return this.formatCurrencyValue(value, column);
+        }
+        return value ?? '';
+    }
+    isSelectedTableColumn(column) {
+        return !this.isPreview && !!column?.uniqueIdentifier && this.pdfDesignerService.getSelectTableColumn() === column.uniqueIdentifier;
+    }
+    formatCurrencyValue(value, field) {
+        value = this.normalizeCurrencyValue(value);
+        if (value === undefined || value === null || value === '')
+            return '';
+        if (field && Object.prototype.hasOwnProperty.call(field, 'currencySymbol')) {
+            return `${field.currencySymbol ? field.currencySymbol + ' ' : ''}${value}`;
+        }
+        const currency = this.resolveCurrencyOption();
+        return `${currency?.symbol || 'INR'} ${value}`;
+    }
+    getCurrencySymbol() {
+        return this.resolveCurrencyOption()?.symbol || '';
+    }
+    normalizeCurrencyValue(value) {
+        if (!value || typeof value !== 'object')
+            return value;
+        const scalarValue = value.value ?? value.amount ?? value.total ?? value.totalAmount ?? value.taxAmount;
+        if (scalarValue !== undefined && scalarValue !== null && typeof scalarValue !== 'object') {
+            return scalarValue;
+        }
+        if (Array.isArray(value.group)) {
+            return value.group.reduce((total, entry) => {
+                return total + this.toNumericValue(entry?.value ?? entry?.amount ?? entry?.taxAmount ?? entry?.total);
+            }, 0);
+        }
+        return '';
+    }
+    resolveCurrencyOption() {
+        const configuredCurrency = this.pdf?.currency || this.pdf?.pdfSettings?.currency;
+        if (configuredCurrency?.symbol || configuredCurrency?.currencySymbol) {
+            return {
+                code: configuredCurrency.code || configuredCurrency.currencyCode,
+                name: configuredCurrency.name || configuredCurrency.currencyName,
+                symbol: configuredCurrency.symbol || configuredCurrency.currencySymbol
+            };
+        }
+        const currencyCode = this.dataBind?.currencyCode || this.dataBind?.customer?.currencyCode || this.pdf?.currencyCode || this.pdf?.pdfSettings?.currencyCode;
+        if (currencyCode) {
+            const currencyOption = this.countryService.getCountryData(['currencies'])?.find((option) => option.code === currencyCode);
+            if (currencyOption)
+                return currencyOption;
+        }
+        return this.countryService.getCurrentCurrency();
+    }
+    normalizeMargin(margin) {
+        const fallback = [0, 0, 0, 0];
+        if (!Array.isArray(margin))
+            return fallback;
+        return [0, 1, 2, 3].map(index => Number(margin[index]) || 0);
+    }
+    marginToCss(margin) {
+        const normalized = this.normalizeMargin(margin);
+        return `${normalized[1]}px ${normalized[2]}px ${normalized[3]}px ${normalized[0]}px`;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PdfDesignerComponent, deps: [{ token: DataService }, { token: ChangeService }, { token: CountryService }, { token: PdfDesignerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview", from: "from", dataBind: "dataBind", isPropertyHide: "isPropertyHide" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>    \n    <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n      <div class=\"form-preview\">\n        <!-- AP-10MAR25 Heading -->\n        <div *ngIf=\"!isPreview\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\"\n          style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n          (click)=\"selectHeading('Header')\">\n          <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n            <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n              <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n              <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n            </div>\n            <div class=\"action-buttons\">\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n          <!-- AP-19MAR25 Line Element -->\n          <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n            (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div *ngIf=\"!isPreview \" class=\"line-element\">\n              <div></div>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                'font-family': field?.style?.font || 'Helvetica Neue',\n                'font-weight': field?.style?.bold ? '700' : '400',\n                'font-size': (field?.style?.fontSize || 12) + 'px',\n                'width': (field?.width || 100) + '%',\n                'text-align': field.textAlign || 'left',\n                'border-radius': '5px',\n                'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                'color': field?.style?.color || '#000000',\n                'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n              }\" />\n          </div>\n  \n          <!--SKS25MAR25 Image Upload Element -->\n          <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n            (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" \n            (mouseenter)=\"isImageHover = true;\"\n            (mouseleave)=\"isImageHover = false;\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div>\n                    <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                      <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                        <div style=\"display: flex; justify-content: end;\">\n                          <i (click)=\"onImageEdit(field)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                          <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                          </svg>\n                        </div>\n                        <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n                      </div>\n  \n                      <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                        <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                          <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                          <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                        </label>\n                        <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                          style=\"display: none;\" />\n                      </div>\n                    </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Space Element -->\n          <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div *ngIf=\"!isPreview \" class=\"field-content\">\n                <div class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- SKS21NOV25  signaturePad -->\n          <div *ngIf=\"field?.type === 'signaturePad'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div  *ngIf=\"!isPreview \" 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                <!-- SKS21NOV25 Signature Pad Field -->\n                <div class=\"signature-pad-container\">\n                  <!-- SKS21NOV25 Builder mode (editable) -->\n                  <canvas *ngIf=\"!isPreview\"\n                    #sigCanvas\n                    [id]=\"field.id\"\n                    class=\"signature-pad\"\n                    (pointerdown)=\"pointerDown($event, field)\"\n                    (pointermove)=\"pointerMove($event, field)\"\n                    (pointerup)=\"pointerUp($event, field)\"\n                    (pointercancel)=\"pointerUp($event, field)\"\n                    (lostpointercapture)=\"pointerUp($event, field)\">\n                  </canvas>\n\n                  <!-- SKS21NOV25 Preview mode (static image) -->\n                  <img *ngIf=\"isPreview && field.value\"\n                      [src]=\"field.value\"\n                      class=\"signature-preview\" />\n                  <!-- SKS21NOV25 Empty state in preview -->\n                  <div *ngIf=\"isPreview && !field.value\"\n                      class=\"signature-placeholder\">\n                      Signature\n                  </div>\n                  <!-- SKS21NOV25 Builder buttons -->\n                  <div *ngIf=\"!isPreview\" class=\"signature-actions\">\n                      <button type=\"button\" (click)=\"onQuestionChange($event.value, field)\">Save</button>\n                      <button type=\"button\" (click)=\"clearSignature(field)\">Clear</button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- SKS16SEP25 Date, currency, boolean, text -->\n          <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' ||  field?.type === 'boolean' || field?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <!-- AP-04JUN25 - replace custom date picker -->\n                <nxt-input [type]=\"field.type === 'boolean' ? 'checkbox' : field?.type === 'text' ? 'textarea' : field.type\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n                  [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"field.isReadOnly\"\n                  [currency] = 'selectedCurrency' [label]=\"field?.questionText\" (click)=\"field?.type === 'text' ? openTextSettings(field, $event) : ''\"\n                  [inputWeight]=\"\" [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                  [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                  inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"field?.style?.alignment || ''\"\n                  [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n                </nxt-input>\n              </div>\n            </div>\n            <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n              [ngStyle]=\"{\n                position: 'absolute',\n                background: '#fff',\n                border: '1px solid #ccc',\n                padding: '6px 10px',\n                'border-radius': '4px',\n                'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                'z-index': '65535',\n                display: 'flex',\n                'text-align': 'center',\n                gap: '8px'\n              }\">\n          \n              <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                <option [value]=\"12\">12pt</option>\n                <option [value]=\"14\">14pt</option>\n                <option [value]=\"16\">16pt</option>\n                <option [value]=\"18\">18pt</option>\n                <option [value]=\"24\">24pt</option>\n              </select>\n  \n              <label title=\"Text Color\" class=\"color-label\">\n              <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n              <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n              </label>\n  \n              <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n            \n              <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n  \n  \n            \n              <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n              </button>\n          \n              <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n            </div>\n          </div>\n  \n          <!-- Pdf -->\n          <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg> \n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n                <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"form-preview\" style=\"padding: unset !important;\">\n                  <ng-container *ngFor=\"let pdfField of field?.pdfReferenceQuestions[field?.pdfReference]; let j = index\">\n                    <!-- AP-19MAR25 Line Element -->\n                    <div *ngIf=\"pdfField?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: pdfField.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n                      (click)=\"selectElement(i,j); $event.stopPropagation();\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, j)\" (dragover)=\"onDragOver($event, j)\"\n                      (drop)=\"onDrop($event, j)\">\n                      <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                          'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                          'font-weight': pdfField?.style?.bold ? '700' : '400',\n                          'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n                          'width': (pdfField?.width || 100) + '%',\n                          'text-align': pdfField.textAlign || 'left',\n                          'border-radius': '5px',\n                          'border-style': (pdfField.lineStyle?.toLowerCase() || 'solid'),\n                          'color': pdfField?.style?.color || '#000000',\n                          'margin-top': (pdfField?.style?.paddingTop || 0) + 'px',\n                          'margin-bottom': (pdfField?.style?.paddingBottom ?? 10) + 'px'\n                        }\" />\n                    </div>\n\n                    <!--SKS25MAR25 Image Upload Element -->\n                    <div *ngIf=\"pdfField?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'text-align': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                         'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n                        'font-weight': pdfField?.style?.bold ? '700' : '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" \n                      (mouseenter)=\"isImageHover = true;\"\n                      (mouseleave)=\"isImageHover = false;\">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <div>\n                              <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': pdfField?.style?.alignment || '' }\">\n                                <div class=\"logo-preview\" *ngIf=\"pdfField.imageData\">\n                                  <div style=\"display: flex; justify-content: end;\">\n                                    <i (click)=\"onImageEdit(pdfField)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                                    <svg (click)=\"onImageDelete(pdfField)\" width=\"16\" height=\"16\"\n                                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                      <path\n                                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                    </svg>\n                                  </div>\n                                  <img [src]=\"pdfField.imageData\" [style.width.px]=\"pdfField.imageSize?.width || 100\" [style.height.px]=\"pdfField.imageSize?.height || 100\" />\n                                </div>\n\n                                <div *ngIf=\"!pdfField.imageData\" class=\"logo-upload-placeholder\">\n                                  <label for=\"logo-upload-{{j}}\" class=\"logo-upload-label\">\n                                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                                  </label>\n                                  <input type=\"file\" id=\"logo-upload-{{j}}\" accept=\"image/*\" (change)=\"fileChangeEvent(pdfField, $event)\"\n                                    style=\"display: none;\" />\n                                </div>\n                              </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Space Element -->\n                    <div *ngIf=\"pdfField?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'text-align': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                         'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n                        'font-weight': pdfField?.style?.bold ? '700' : '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div *ngIf=\"!isPreview \" class=\"field-content\">\n                          <div class=\"label-container\">\n                            <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(pdfField, j)\" class=\"delete-icon\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Date -->\n                     <!-- display: pdfField.isHidden ? 'none' : 'block'  -->\n                    <div *ngIf=\"pdfField?.type === 'date' || pdfField?.type === 'currency' ||  pdfField?.type === 'boolean' || pdfField?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'border-radius': '5px',\n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n                        'font-weight': pdfField?.style?.bold ? '700' : '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px '  +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px '  +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px '  +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px ' ,\n                       }\"[class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <!-- AP-04JUN25 - replace custom date picker -->\n                          <nxt-input [type]=\"pdfField.type === 'boolean' ? 'checkbox' : pdfField?.type === 'text' ? 'textarea' : pdfField.type\" [mode]=\"'edit'\" [value]=\"pdfField.value\" [question]=\"pdfField\" [labelFont]=\"\"\n                            [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"pdfField.isReadOnly\"\n                            [currency] = 'selectedCurrency' [label]=\"pdfField?.questionText\" (click)=\"pdfField?.type === 'text' ? openTextSettings(pdfField, $event) : ''\"\n                            [inputWeight]=\"\"  [showLabel]=\"pdfField?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                            [placeholder]=\"pdfField.question ? pdfField.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                            inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"pdfField?.style?.alignment || ''\"\n                            [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, pdfField)\">\n                          </nxt-input>\n                        </div>\n                      </div>\n                      <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                      <div *ngIf=\"showTextSettings && isPreview && selectedColumn === pdfField\" class=\"text-settings-toolbar\"\n                        [ngStyle]=\"{\n                          position: 'absolute',\n                          background: '#fff',\n                          border: '1px solid #ccc',\n                          padding: '6px 10px',\n                          'border-radius': '4px',\n                          'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                          'z-index': '65535',\n                          display: 'flex',\n                          'text-align': 'center',\n                          gap: '8px'\n                        }\">\n                    \n                        <!-- Font Size -->\n                        <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                          <option [value]=\"12\">12pt</option>\n                          <option [value]=\"14\">14pt</option>\n                          <option [value]=\"16\">16pt</option>\n                          <option [value]=\"18\">18pt</option>\n                          <option [value]=\"24\">24pt</option>\n                        </select>\n\n                        <!-- Text Color -->\n                        <label title=\"Text Color\" class=\"color-label\">\n                        <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                        <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                        </label>\n\n                        <!-- Bold -->\n                        <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n                      \n                        <!-- Italic -->\n                        <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n                        <!-- Underline -->\n                        <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n                        <!-- Align Left -->\n                        <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n                        </button>\n                      \n                        <!-- Align Center -->\n                        <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n                        </button>\n                      \n                        <!-- Align Right -->\n                        <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n                        </button>\n                    \n                        <!-- Close -->\n                        <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                      </div>  \n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!--  Table  -->\n          <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <div class=\"nxt-table-container\">\n                  <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n                    [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                    tableWidth=\"auto\" isEditable=true isPreview=isPreview (columnSelected)=\"selectElement(i);columnSelected($event)\"\n                    [data]=\"field.value?.data\"\n                    [summaryValues]=\"field.value?.summaryValue\"\n                    (valueChange)=\"onQuestionChange($event, field)\"\n                    (removeColumn)=removeColumn($event)>\n                  </nxt-datatable>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div *ngIf=\"!isPropertyHide && isPreview\" style=\"width: 25%; margin-bottom:10px\">\n        <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n          <div class=\"color-picker\">\n            <label>Change Color</label>\n            <div class=\"colors\">\n              <!-- Default colors -->\n              <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n                   [style.background]=\"color\"\n                   (click)=\"selectColor(color)\">\n              </div>\n          \n              <!-- Last box: custom color picker with eyedropper -->\n              <label class=\"color-swatch custom-picker\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n                <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n              </label>\n            </div>\n          </div> \n           <!-- SKS22JUL25 Dropdown -->\n           <nxt-dropdown  \n              [options]=\"currencyOptions\"\n              [id]=\"bookletId\" \n              [selectedValue]=\"selectedCurrency\"\n              [labelColor]=\"'#ffff'\"\n              [inputTextColor]=\"'#ffff'\"\n              [inputBgColor]=\"'#585653'\"\n              placeholder=\"\" [from]=\"'normalDropDown'\"\n              [apiMeta] = \"{'field': 'name','isObject': true}\"\n              (valueChange)=\"currencyChange($event.value.valueObj)\">\n          </nxt-dropdown>    \n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n        <div style=\"height: 200px;\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n        </div>\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container.isPreview{border:none;background-color:#fff}.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);min-height:250px;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media(max-width:600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}.signature-pad-container{width:100%;position:relative}.signature-pad{width:100%;height:90px;border:1px dashed #aaa;border-radius:6px;touch-action:none}.signature-preview{width:100%;height:90px;object-fit:contain;border:1px solid #ccc;border-radius:6px}.signature-placeholder{width:100%;height:90px;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa}.signature-actions{margin-top:5px;display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "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", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview", from: "from", dataBind: "dataBind", isPropertyHide: "isPropertyHide", pdfDefinitionOptions: "pdfDefinitionOptions" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit", pdfOutputEmit: "pdfOutputEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>    \n    <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n      <div class=\"form-preview\">\n        <!-- AP-10MAR25 Heading -->\n        <div *ngIf=\"!isPreview\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\"\n          style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n          (click)=\"selectHeading('Header')\">\n          <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n            <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n              <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n              <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n            </div>\n            <div class=\"action-buttons\">\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n            </div>\n          </div>\n        </div>\n        <!-- SKS26MAY26 pdf page -->\n        <div class=\"pdf-page\" [style.background-color]=\"getPageBackgroundColor()\">\n          <div *ngIf=\"getWatermarkText()\" class=\"pdf-watermark\" [ngStyle]=\"getWatermarkStyle()\">\n            {{ getWatermarkText() }}\n          </div>\n          <div *ngIf=\"shouldShowHeaderOnCanvas()\" class=\"pdf-page-header\" [ngStyle]=\"getHeaderStyle()\">\n            <div class=\"pdf-running-band\" [ngStyle]=\"getRunningBandBorderStyle('header')\">\n              <ng-container *ngIf=\"getRunningBandColumns('header').length === 3; else singleHeader\">\n                <span>{{ getRunningBandColumns('header')[0] }}</span>\n                <span>{{ getRunningBandColumns('header')[1] }}</span>\n                <span>{{ getRunningBandColumns('header')[2] }}</span>\n              </ng-container>\n              <ng-template #singleHeader>\n                <span class=\"pdf-running-single\">{{ getRunningBandColumns('header')[0] }}</span>\n              </ng-template>\n            </div>\n          </div>\n          <div class=\"pdf-page-content\" [ngStyle]=\"getPageContentStyle()\">\n        <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n          <!-- AP-19MAR25 Line Element -->\n          <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n            (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div *ngIf=\"!isPreview \" class=\"line-element\">\n              <div></div>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                'font-family': field?.style?.font || 'Helvetica Neue',\n                'font-weight': field?.style?.bold ? '700' : '400',\n                'font-size': (field?.style?.fontSize || 12) + 'px',\n                'width': (field?.width || 100) + '%',\n                'text-align': field.textAlign || 'left',\n                'border-radius': '5px',\n                'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                'border-color': field.lineColor || field?.style?.color || '#000000',\n                'border-width': (field.lineWidth || 1) + 'px 0 0 0',\n                'color': field?.style?.color || '#000000',\n                'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n              }\" />\n          </div>\n  \n          <!--SKS25MAR25 Image Upload Element -->\n          <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n            (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" \n            (mouseenter)=\"isImageHover = true;\"\n            (mouseleave)=\"isImageHover = false;\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div>\n                    <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                      <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                        <div style=\"display: flex; justify-content: end;\">\n                          <i (click)=\"onImageEdit(field)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                          <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                          </svg>\n                        </div>\n                        <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n                      </div>\n  \n                      <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                        <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                          <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                          <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                        </label>\n                        <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                          style=\"display: none;\" />\n                      </div>\n                    </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Space Element -->\n          <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div *ngIf=\"!isPreview \" class=\"field-content\">\n                <div class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- SKS21NOV25  signaturePad -->\n          <div *ngIf=\"field?.type === 'signaturePad'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div  *ngIf=\"!isPreview \" 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                <!-- SKS21NOV25 Signature Pad Field -->\n                <div class=\"signature-pad-container\">\n                  <!-- SKS21NOV25 Builder mode (editable) -->\n                  <canvas *ngIf=\"!isPreview\"\n                    #sigCanvas\n                    [id]=\"field.id\"\n                    class=\"signature-pad\"\n                    (pointerdown)=\"pointerDown($event, field)\"\n                    (pointermove)=\"pointerMove($event, field)\"\n                    (pointerup)=\"pointerUp($event, field)\"\n                    (pointercancel)=\"pointerUp($event, field)\"\n                    (lostpointercapture)=\"pointerUp($event, field)\">\n                  </canvas>\n\n                  <!-- SKS21NOV25 Preview mode (static image) -->\n                  <img *ngIf=\"isPreview && field.value\"\n                      [src]=\"field.value\"\n                      class=\"signature-preview\" />\n                  <!-- SKS21NOV25 Empty state in preview -->\n                  <div *ngIf=\"isPreview && !field.value\"\n                      class=\"signature-placeholder\">\n                      Signature\n                  </div>\n                  <!-- SKS21NOV25 Builder buttons -->\n                  <div *ngIf=\"!isPreview\" class=\"signature-actions\">\n                      <button type=\"button\" (click)=\"onQuestionChange($event.value, field)\">Save</button>\n                      <button type=\"button\" (click)=\"clearSignature(field)\">Clear</button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- SKS16SEP25 Date, currency, boolean, text -->\n          <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' ||  field?.type === 'boolean' || field?.type === 'text' || field?.type === 'Section' || field?.type === 'RichText' || field?.type === 'Note' || field?.type === 'PageBreak' || field?.type === 'PdfMake'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [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                <ng-container [ngSwitch]=\"field?.type\">\n                  <div *ngSwitchCase=\"'Section'\" class=\"pdf-section-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    {{ displayFieldValue(field) }}\n                  </div>\n\n                  <div *ngSwitchCase=\"'Note'\" class=\"pdf-note-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    {{ displayFieldValue(field) }}\n                  </div>\n\n                  <div *ngSwitchCase=\"'RichText'\" class=\"pdf-richtext-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    <ng-container *ngFor=\"let line of getRichTextLines(field); let lineIndex = index\">\n                      <div *ngIf=\"isRichTextHeading(field, lineIndex, line)\" class=\"pdf-richtext-heading\">\n                        {{ getRichTextLineText(line) }}\n                      </div>\n                      <div *ngIf=\"!isRichTextHeading(field, lineIndex, line) && !isRichTextBullet(line)\" class=\"pdf-richtext-line\">\n                        {{ line }}\n                      </div>\n                      <div *ngIf=\"isRichTextBullet(line)\" class=\"pdf-richtext-bullet\">\n                        <span>\u2022</span>\n                        <span>{{ getRichTextLineText(line) }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n\n                  <div *ngSwitchCase=\"'PageBreak'\" class=\"pdf-pagebreak-render\">\n                    <span>Page break</span>\n                  </div>\n\n                  <div *ngSwitchCase=\"'PdfMake'\" class=\"pdfmake-render\">\n                    <div class=\"pdfmake-title\">Advanced pdfmake content</div>\n                    <pre>{{ getPdfMakePreview(field) }}</pre>\n                  </div>\n\n                  <ng-container *ngSwitchCase=\"'boolean'\">\n                    <nxt-input *ngIf=\"!isPreview\" [type]=\"'checkbox'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n                      [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"field.isReadOnly\"\n                      [currency]=\"selectedCurrency\" [label]=\"field?.questionText\" [inputWeight]=\"\"\n                      [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                      [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"false\"\n                      inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"field?.style?.alignment || ''\"\n                      [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n                    </nxt-input>\n\n                    <div *ngIf=\"isPreview\" class=\"pdf-text-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                      <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"pdf-field-label\" [ngStyle]=\"getElementLabelStyle(field)\">\n                        {{ field.questionText }}\n                      </div>\n                      <div class=\"pdf-field-value\">{{ displayFieldValue(field) }}</div>\n                    </div>\n                  </ng-container>\n\n                  <div *ngSwitchDefault class=\"pdf-text-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"pdf-field-label\" [ngStyle]=\"getElementLabelStyle(field)\">\n                      {{ field.questionText }}\n                    </div>\n                    <ng-container *ngIf=\"shouldRenderStyledTextLines(field); else plainTextValue\">\n                      <div *ngFor=\"let line of getStyledTextLines(field); let lineIndex = index\"\n                        class=\"pdf-field-value\"\n                        [class.pdf-text-heading-line]=\"isTextHeadingLine(field, lineIndex, line)\"\n                        [class.pdf-text-empty-line]=\"!line\"\n                        [ngStyle]=\"getStyledTextLineStyle(field, lineIndex, line)\">\n                        {{ line || ' ' }}\n                      </div>\n                    </ng-container>\n                    <ng-template #plainTextValue>\n                      <div class=\"pdf-field-value\">{{ displayFieldValue(field) }}</div>\n                    </ng-template>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n            <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n              [ngStyle]=\"{\n                position: 'absolute',\n                background: '#fff',\n                border: '1px solid #ccc',\n                padding: '6px 10px',\n                'border-radius': '4px',\n                'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                'z-index': '65535',\n                display: 'flex',\n                'text-align': 'center',\n                gap: '8px'\n              }\">\n          \n              <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                <option [value]=\"12\">12pt</option>\n                <option [value]=\"14\">14pt</option>\n                <option [value]=\"16\">16pt</option>\n                <option [value]=\"18\">18pt</option>\n                <option [value]=\"24\">24pt</option>\n              </select>\n  \n              <label title=\"Text Color\" class=\"color-label\">\n              <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n              <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n              </label>\n  \n              <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n            \n              <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n  \n  \n            \n              <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n              </button>\n          \n              <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n            </div>\n          </div>\n  \n          <!-- Pdf -->\n          <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg> \n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n                <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"pdf-nested-render\">\n                  <app-booklet [referenceKey]=\"field?.pdfReference\" [questions]=\"field?.pdfReferenceQuestions[field?.pdfReference]\" [isPreview]=\"isPreview\" [currencySymbol]=\"getCurrencySymbol()\" (questionChange)=\"onQuestionChange($event.value, $event.field)\"></app-booklet>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!--  Table  -->\n          <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [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 table-field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <div class=\"nxt-table-container\">\n                  <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n                    [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                    tableWidth=\"auto\" isEditable=true isPreview=isPreview (columnSelected)=\"selectElement(i);columnSelected($event)\"\n                    [data]=\"field.value?.data\" [serialNumberColumn]=\"false\"\n                    [summaryValues]=\"field.value?.summaryValues || field.value?.summaryValue\"\n                    (valueChange)=\"onQuestionChange($event, field)\"\n                    (removeColumn)=removeColumn($event)>\n                  </nxt-datatable>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n          </div>\n          <!-- SKS26MAY26 pdf footer -->\n          <div *ngIf=\"shouldShowFooterOnCanvas()\" class=\"pdf-page-footer\" [ngStyle]=\"getFooterStyle()\">\n            <div class=\"pdf-running-band\" [ngStyle]=\"getRunningBandBorderStyle('footer')\">\n              <ng-container *ngIf=\"getRunningBandColumns('footer').length === 3; else singleFooter\">\n                <span>{{ getRunningBandColumns('footer')[0] }}</span>\n                <span>{{ getRunningBandColumns('footer')[1] }}</span>\n                <span>{{ getRunningBandColumns('footer')[2] }}</span>\n              </ng-container>\n              <ng-template #singleFooter>\n                <span class=\"pdf-running-single\">{{ getRunningBandColumns('footer')[0] }}</span>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"!isPropertyHide && isPreview\" style=\"width: 25%; margin-bottom:10px\">\n        <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n          <div class=\"color-picker\">\n            <label>Change Color</label>\n            <div class=\"colors\">\n              <!-- Default colors -->\n              <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n                   [style.background]=\"color\"\n                   (click)=\"selectColor(color)\">\n              </div>\n          \n              <!-- Last box: custom color picker with eyedropper -->\n              <label class=\"color-swatch custom-picker\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n                <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n              </label>\n            </div>\n          </div> \n           <!-- SKS22JUL25 Dropdown -->\n           <nxt-dropdown  \n              [options]=\"currencyOptions\"\n              [id]=\"bookletId\" \n              [selectedValue]=\"selectedCurrency\"\n              [labelColor]=\"'#ffff'\"\n              [inputTextColor]=\"'#ffff'\"\n              [inputBgColor]=\"'#585653'\"\n              placeholder=\"\" [from]=\"'normalDropDown'\"\n              [apiMeta] = \"{'field': 'name','isObject': true}\"\n              (valueChange)=\"currencyChange($event.value.valueObj)\">\n          </nxt-dropdown>    \n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n        <div style=\"height: 200px;\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n        </div>\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container.isPreview{border:none;background-color:#fff}.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);min-height:250px;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.pdf-page{position:relative;width:794px;min-height:1123px;margin:12px auto 28px;box-shadow:0 18px 45px #0f172a29;overflow:hidden}.pdf-page-content{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-start;min-height:100%;box-sizing:border-box}.pdf-watermark{position:absolute;top:50%;left:50%;z-index:0;width:900px;text-align:center;font-weight:700;letter-spacing:0;pointer-events:none;-webkit-user-select:none;user-select:none}.pdf-page-footer,.pdf-page-header{position:absolute;z-index:2;min-height:24px;white-space:pre-wrap}.pdf-running-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;padding:8px 0}.pdf-running-band span{overflow-wrap:anywhere}.pdf-running-band span:nth-child(2){text-align:center}.pdf-running-band span:nth-child(3){text-align:right}.pdf-running-single{grid-column:1 / -1;text-align:inherit!important}.pdf-text-render{min-height:16px;white-space:pre-wrap;overflow-wrap:anywhere;box-sizing:border-box}.pdf-field-label{margin-bottom:2px}.pdf-field-value{min-height:16px}.pdf-text-heading-line{line-height:1.05}.pdf-text-empty-line{font-size:0}.pdf-section-render{width:100%;min-height:32px;box-sizing:border-box;overflow-wrap:anywhere}.pdf-note-render{width:100%;min-height:34px;border:1px solid currentColor;box-sizing:border-box;overflow-wrap:anywhere;white-space:pre-wrap}.pdf-richtext-render{width:100%;white-space:normal;overflow-wrap:anywhere}.pdf-richtext-heading{color:var(--pdf-heading-color, #2f9e44);font-weight:600;margin-bottom:8px}.pdf-richtext-line{margin-bottom:7px}.pdf-richtext-bullet{display:grid;grid-template-columns:14px minmax(0,1fr);gap:4px;margin-bottom:7px}.pdf-pagebreak-render{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;color:#64748b;font-size:11px;border:1px dashed #94a3b8;background:#f8fafc;text-transform:uppercase;letter-spacing:0}.pdfmake-render{width:100%;border:1px dashed #94a3b8;background:#f8fafc;color:#334155;padding:10px;box-sizing:border-box}.pdfmake-title{font-size:11px;font-weight:700;margin-bottom:6px}.pdfmake-render pre{margin:0;max-height:160px;overflow:auto;white-space:pre-wrap;font-size:11px}.pdf-table-render{width:100%;overflow-x:auto}.pdf-nested-render{width:100%;padding:0}.pdf-table-render table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:inherit}.pdf-table-render th,.pdf-table-render td{border:1px solid #cfd8d1;padding:6px;vertical-align:top;overflow-wrap:anywhere}.pdf-table-render th{cursor:pointer;position:relative}.pdf-table-render th:hover{outline:2px solid rgba(85,146,253,.45);outline-offset:-2px}.pdf-table-render .pdf-table-column-selected{box-shadow:inset 0 0 0 2px #5592fd}.pdf-summary-row td{border-color:transparent;background:transparent}.pdf-summary-label{color:#555;text-align:right}.pdf-summary-value{color:#222;font-weight:600}.pdf-page .field-container,.pdf-page .line-field{background:transparent;border:1px solid transparent;box-sizing:border-box}.pdf-page .field-container.highlight,.pdf-page .line-field.highlight{border-color:#5592fd!important;background:#eff8ff8c}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:flex-start;align-items:center;width:100%;overflow-x:auto;overflow-y:hidden}nxt-datatable{width:max-content!important;min-width:100%;max-width:none}.table-field-wrapper{overflow-x:auto;overflow-y:hidden}:host ::ng-deep .nxt-table-container .table-layout,:host ::ng-deep .nxt-table-container .custom-table,:host ::ng-deep .nxt-table-container .table-row{min-width:800px}:host ::ng-deep .nxt-table-container .table-cell:not(.sticky-column):not(.actionCol){flex:0 0 92px;width:92px!important;min-width:92px;max-width:92px}:host ::ng-deep .nxt-table-container .nxtTableHeader{min-width:92px}:host ::ng-deep .nxt-table-container .nxtTableHeader[data-column-id=ngnxtTM0xwMZqrrr]{flex-basis:130px;width:130px!important;min-width:130px;max-width:130px}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media(max-width:600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}.signature-pad-container{width:100%;position:relative}.signature-pad{width:100%;height:90px;border:1px dashed #aaa;border-radius:6px;touch-action:none}.signature-preview{width:100%;height:90px;object-fit:contain;border:1px solid #ccc;border-radius:6px}.signature-placeholder{width:100%;height:90px;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa}.signature-actions{margin-top:5px;display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "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", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "textAlign", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "selectedOption", "apiMeta", "direction", "currency", "helpText", "apiKey", "readOnly", "padding", "margin", "onlyView", "size"], outputs: ["valueChange", "inputValue", "selectEmit", "onBlur", "onFocus", "toggleEmit", "removeValueEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "component", type: BookletComponent, selector: "app-booklet", inputs: ["referenceKey", "questions", "isPreview", "currencySymbol"], outputs: ["questionChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: PdfDesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pdf-designer', standalone: true, imports: [nxtDropdown, CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, NxtInput, NxtCustomTranslatePipe], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>    \n    <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n      <div class=\"form-preview\">\n        <!-- AP-10MAR25 Heading -->\n        <div *ngIf=\"!isPreview\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\"\n          style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n          (click)=\"selectHeading('Header')\">\n          <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n            <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n              <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n              <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n            </div>\n            <div class=\"action-buttons\">\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n            </div>\n          </div>\n        </div>\n        <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n          <!-- AP-19MAR25 Line Element -->\n          <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n            (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div *ngIf=\"!isPreview \" class=\"line-element\">\n              <div></div>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                'font-family': field?.style?.font || 'Helvetica Neue',\n                'font-weight': field?.style?.bold ? '700' : '400',\n                'font-size': (field?.style?.fontSize || 12) + 'px',\n                'width': (field?.width || 100) + '%',\n                'text-align': field.textAlign || 'left',\n                'border-radius': '5px',\n                'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                'color': field?.style?.color || '#000000',\n                'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n              }\" />\n          </div>\n  \n          <!--SKS25MAR25 Image Upload Element -->\n          <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n            (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" \n            (mouseenter)=\"isImageHover = true;\"\n            (mouseleave)=\"isImageHover = false;\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div>\n                    <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                      <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                        <div style=\"display: flex; justify-content: end;\">\n                          <i (click)=\"onImageEdit(field)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                          <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                          </svg>\n                        </div>\n                        <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n                      </div>\n  \n                      <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                        <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                          <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                          <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                        </label>\n                        <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                          style=\"display: none;\" />\n                      </div>\n                    </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Space Element -->\n          <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div *ngIf=\"!isPreview \" class=\"field-content\">\n                <div class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- SKS21NOV25  signaturePad -->\n          <div *ngIf=\"field?.type === 'signaturePad'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div  *ngIf=\"!isPreview \" 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                <!-- SKS21NOV25 Signature Pad Field -->\n                <div class=\"signature-pad-container\">\n                  <!-- SKS21NOV25 Builder mode (editable) -->\n                  <canvas *ngIf=\"!isPreview\"\n                    #sigCanvas\n                    [id]=\"field.id\"\n                    class=\"signature-pad\"\n                    (pointerdown)=\"pointerDown($event, field)\"\n                    (pointermove)=\"pointerMove($event, field)\"\n                    (pointerup)=\"pointerUp($event, field)\"\n                    (pointercancel)=\"pointerUp($event, field)\"\n                    (lostpointercapture)=\"pointerUp($event, field)\">\n                  </canvas>\n\n                  <!-- SKS21NOV25 Preview mode (static image) -->\n                  <img *ngIf=\"isPreview && field.value\"\n                      [src]=\"field.value\"\n                      class=\"signature-preview\" />\n                  <!-- SKS21NOV25 Empty state in preview -->\n                  <div *ngIf=\"isPreview && !field.value\"\n                      class=\"signature-placeholder\">\n                      Signature\n                  </div>\n                  <!-- SKS21NOV25 Builder buttons -->\n                  <div *ngIf=\"!isPreview\" class=\"signature-actions\">\n                      <button type=\"button\" (click)=\"onQuestionChange($event.value, field)\">Save</button>\n                      <button type=\"button\" (click)=\"clearSignature(field)\">Clear</button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- SKS16SEP25 Date, currency, boolean, text -->\n          <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' ||  field?.type === 'boolean' || field?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <!-- AP-04JUN25 - replace custom date picker -->\n                <nxt-input [type]=\"field.type === 'boolean' ? 'checkbox' : field?.type === 'text' ? 'textarea' : field.type\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n                  [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"field.isReadOnly\"\n                  [currency] = 'selectedCurrency' [label]=\"field?.questionText\" (click)=\"field?.type === 'text' ? openTextSettings(field, $event) : ''\"\n                  [inputWeight]=\"\" [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                  [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                  inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"field?.style?.alignment || ''\"\n                  [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n                </nxt-input>\n              </div>\n            </div>\n            <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n              [ngStyle]=\"{\n                position: 'absolute',\n                background: '#fff',\n                border: '1px solid #ccc',\n                padding: '6px 10px',\n                'border-radius': '4px',\n                'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                'z-index': '65535',\n                display: 'flex',\n                'text-align': 'center',\n                gap: '8px'\n              }\">\n          \n              <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                <option [value]=\"12\">12pt</option>\n                <option [value]=\"14\">14pt</option>\n                <option [value]=\"16\">16pt</option>\n                <option [value]=\"18\">18pt</option>\n                <option [value]=\"24\">24pt</option>\n              </select>\n  \n              <label title=\"Text Color\" class=\"color-label\">\n              <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n              <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n              </label>\n  \n              <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n            \n              <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n  \n  \n            \n              <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n              </button>\n          \n              <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n            </div>\n          </div>\n  \n          <!-- Pdf -->\n          <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg> \n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n                <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"form-preview\" style=\"padding: unset !important;\">\n                  <ng-container *ngFor=\"let pdfField of field?.pdfReferenceQuestions[field?.pdfReference]; let j = index\">\n                    <!-- AP-19MAR25 Line Element -->\n                    <div *ngIf=\"pdfField?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: pdfField.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n                      (click)=\"selectElement(i,j); $event.stopPropagation();\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, j)\" (dragover)=\"onDragOver($event, j)\"\n                      (drop)=\"onDrop($event, j)\">\n                      <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                          'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                          'font-weight': pdfField?.style?.bold ? '700' : '400',\n                          'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n                          'width': (pdfField?.width || 100) + '%',\n                          'text-align': pdfField.textAlign || 'left',\n                          'border-radius': '5px',\n                          'border-style': (pdfField.lineStyle?.toLowerCase() || 'solid'),\n                          'color': pdfField?.style?.color || '#000000',\n                          'margin-top': (pdfField?.style?.paddingTop || 0) + 'px',\n                          'margin-bottom': (pdfField?.style?.paddingBottom ?? 10) + 'px'\n                        }\" />\n                    </div>\n\n                    <!--SKS25MAR25 Image Upload Element -->\n                    <div *ngIf=\"pdfField?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [class.highlight]=\"selectedFieldIndex === j && !isPreview \"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'text-align': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                         'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n                        'font-weight': pdfField?.style?.bold ? '700' : '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" \n                      (mouseenter)=\"isImageHover = true;\"\n                      (mouseleave)=\"isImageHover = false;\">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <div>\n                              <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': pdfField?.style?.alignment || '' }\">\n                                <div class=\"logo-preview\" *ngIf=\"pdfField.imageData\">\n                                  <div style=\"display: flex; justify-content: end;\">\n                                    <i (click)=\"onImageEdit(pdfField)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                                    <svg (click)=\"onImageDelete(pdfField)\" width=\"16\" height=\"16\"\n                                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                      <path\n                                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path\n                                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\" />\n                                    </svg>\n                                  </div>\n                                  <img [src]=\"pdfField.imageData\" [style.width.px]=\"pdfField.imageSize?.width || 100\" [style.height.px]=\"pdfField.imageSize?.height || 100\" />\n                                </div>\n\n                                <div *ngIf=\"!pdfField.imageData\" class=\"logo-upload-placeholder\">\n                                  <label for=\"logo-upload-{{j}}\" class=\"logo-upload-label\">\n                                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                                  </label>\n                                  <input type=\"file\" id=\"logo-upload-{{j}}\" accept=\"image/*\" (change)=\"fileChangeEvent(pdfField, $event)\"\n                                    style=\"display: none;\" />\n                                </div>\n                              </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Space Element -->\n                    <div *ngIf=\"pdfField?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'text-align': pdfField?.style?.alignment || '',\n                        'border-radius': '5px',\n                        \n                        'color': pdfField?.style?.color || '#000000',\n                         'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n                        'font-weight': pdfField?.style?.bold ? '700' : '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px ' +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px',\n                        \n                        \n                        display: pdfField.isHidden ? 'none' : 'block' \n                      }\" [class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div *ngIf=\"!isPreview \" class=\"field-content\">\n                          <div class=\"label-container\">\n                            <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(pdfField, j)\" class=\"delete-icon\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Date -->\n                     <!-- display: pdfField.isHidden ? 'none' : 'block'  -->\n                    <div *ngIf=\"pdfField?.type === 'date' || pdfField?.type === 'currency' ||  pdfField?.type === 'boolean' || pdfField?.type === 'text'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" (click)=\"selectElement(i,j); $event.stopPropagation();\"\n                      [ngStyle]=\"{\n                        'font-family': pdfField?.style?.font || 'Helvetica Neue',\n                        'font-size': (pdfField?.style?.fontSize || 12) + 'px',\n                        'width': (pdfField?.width || 100) + '%',\n                        'border-radius': '5px',\n                        'color': pdfField?.style?.color || '#000000',\n                        'font-style': pdfField?.style?.italic ? 'italic' : 'normal',\n                        'font-weight': pdfField?.style?.bold ? '700' : '400',\n                        'padding': \n                          (pdfField?.style?.margin?.[1] || 0) + 'px '  +\n                          (pdfField?.style?.margin?.[2] || 0) + 'px '  +\n                          (pdfField?.style?.margin?.[3] || 0) + 'px '  +\n                          (pdfField?.style?.margin?.[0] || 0) + 'px ' ,\n                       }\"[class.highlight]=\"selectedFieldIndex === j && !isPreview \">\n                      <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                        <div class=\"field-content\">\n                          <!-- AP-04JUN25 - replace custom date picker -->\n                          <nxt-input [type]=\"pdfField.type === 'boolean' ? 'checkbox' : pdfField?.type === 'text' ? 'textarea' : pdfField.type\" [mode]=\"'edit'\" [value]=\"pdfField.value\" [question]=\"pdfField\" [labelFont]=\"\"\n                            [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"pdfField.isReadOnly\"\n                            [currency] = 'selectedCurrency' [label]=\"pdfField?.questionText\" (click)=\"pdfField?.type === 'text' ? openTextSettings(pdfField, $event) : ''\"\n                            [inputWeight]=\"\"  [showLabel]=\"pdfField?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                            [placeholder]=\"pdfField.question ? pdfField.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                            inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"pdfField?.style?.alignment || ''\"\n                            [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, pdfField)\">\n                          </nxt-input>\n                        </div>\n                      </div>\n                      <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                      <div *ngIf=\"showTextSettings && isPreview && selectedColumn === pdfField\" class=\"text-settings-toolbar\"\n                        [ngStyle]=\"{\n                          position: 'absolute',\n                          background: '#fff',\n                          border: '1px solid #ccc',\n                          padding: '6px 10px',\n                          'border-radius': '4px',\n                          'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                          'z-index': '65535',\n                          display: 'flex',\n                          'text-align': 'center',\n                          gap: '8px'\n                        }\">\n                    \n                        <!-- Font Size -->\n                        <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                          <option [value]=\"12\">12pt</option>\n                          <option [value]=\"14\">14pt</option>\n                          <option [value]=\"16\">16pt</option>\n                          <option [value]=\"18\">18pt</option>\n                          <option [value]=\"24\">24pt</option>\n                        </select>\n\n                        <!-- Text Color -->\n                        <label title=\"Text Color\" class=\"color-label\">\n                        <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                        <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                        </label>\n\n                        <!-- Bold -->\n                        <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n                      \n                        <!-- Italic -->\n                        <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n                        <!-- Underline -->\n                        <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n                        <!-- Align Left -->\n                        <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n                        </button>\n                      \n                        <!-- Align Center -->\n                        <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n                        </button>\n                      \n                        <!-- Align Right -->\n                        <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                          <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n                        </button>\n                    \n                        <!-- Close -->\n                        <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                      </div>  \n                    </div>\n                  </ng-container>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!--  Table  -->\n          <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <div class=\"nxt-table-container\">\n                  <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n                    [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                    tableWidth=\"auto\" isEditable=true isPreview=isPreview (columnSelected)=\"selectElement(i);columnSelected($event)\"\n                    [data]=\"field.value?.data\"\n                    [summaryValues]=\"field.value?.summaryValue\"\n                    (valueChange)=\"onQuestionChange($event, field)\"\n                    (removeColumn)=removeColumn($event)>\n                  </nxt-datatable>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n      <div *ngIf=\"!isPropertyHide && isPreview\" style=\"width: 25%; margin-bottom:10px\">\n        <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n          <div class=\"color-picker\">\n            <label>Change Color</label>\n            <div class=\"colors\">\n              <!-- Default colors -->\n              <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n                   [style.background]=\"color\"\n                   (click)=\"selectColor(color)\">\n              </div>\n          \n              <!-- Last box: custom color picker with eyedropper -->\n              <label class=\"color-swatch custom-picker\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n                <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n              </label>\n            </div>\n          </div> \n           <!-- SKS22JUL25 Dropdown -->\n           <nxt-dropdown  \n              [options]=\"currencyOptions\"\n              [id]=\"bookletId\" \n              [selectedValue]=\"selectedCurrency\"\n              [labelColor]=\"'#ffff'\"\n              [inputTextColor]=\"'#ffff'\"\n              [inputBgColor]=\"'#585653'\"\n              placeholder=\"\" [from]=\"'normalDropDown'\"\n              [apiMeta] = \"{'field': 'name','isObject': true}\"\n              (valueChange)=\"currencyChange($event.value.valueObj)\">\n          </nxt-dropdown>    \n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n        <div style=\"height: 200px;\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n        </div>\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container.isPreview{border:none;background-color:#fff}.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);min-height:250px;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media(max-width:600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}.signature-pad-container{width:100%;position:relative}.signature-pad{width:100%;height:90px;border:1px dashed #aaa;border-radius:6px;touch-action:none}.signature-preview{width:100%;height:90px;object-fit:contain;border:1px solid #ccc;border-radius:6px}.signature-placeholder{width:100%;height:90px;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa}.signature-actions{margin-top:5px;display:flex;justify-content:space-between}\n"] }]
+            args: [{ selector: 'app-pdf-designer', standalone: true, imports: [nxtDropdown, CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, NxtInput, NxtCustomTranslatePipe, BookletComponent], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>    \n    <div [ngStyle]=\"!isPreview ? { 'display': 'flex', 'width': '75%' } : { 'display': 'flex', 'width': '100%' }\">\n      <div class=\"form-preview\">\n        <!-- AP-10MAR25 Heading -->\n        <div *ngIf=\"!isPreview\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\"\n          style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n          (click)=\"selectHeading('Header')\">\n          <div class=\"label-container\" style=\"display: flex;justify-content: space-between;\">\n            <div *ngIf=\"pdf\" style=\"padding-left: 10px;\">\n              <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n              <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n            </div>\n            <div class=\"action-buttons\">\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n              <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n            </div>\n          </div>\n        </div>\n        <!-- SKS26MAY26 pdf page -->\n        <div class=\"pdf-page\" [style.background-color]=\"getPageBackgroundColor()\">\n          <div *ngIf=\"getWatermarkText()\" class=\"pdf-watermark\" [ngStyle]=\"getWatermarkStyle()\">\n            {{ getWatermarkText() }}\n          </div>\n          <div *ngIf=\"shouldShowHeaderOnCanvas()\" class=\"pdf-page-header\" [ngStyle]=\"getHeaderStyle()\">\n            <div class=\"pdf-running-band\" [ngStyle]=\"getRunningBandBorderStyle('header')\">\n              <ng-container *ngIf=\"getRunningBandColumns('header').length === 3; else singleHeader\">\n                <span>{{ getRunningBandColumns('header')[0] }}</span>\n                <span>{{ getRunningBandColumns('header')[1] }}</span>\n                <span>{{ getRunningBandColumns('header')[2] }}</span>\n              </ng-container>\n              <ng-template #singleHeader>\n                <span class=\"pdf-running-single\">{{ getRunningBandColumns('header')[0] }}</span>\n              </ng-template>\n            </div>\n          </div>\n          <div class=\"pdf-page-content\" [ngStyle]=\"getPageContentStyle()\">\n        <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n          <!-- AP-19MAR25 Line Element -->\n          <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" [ngClass]=\"{'isPreview': isPreview}\"\n            (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div *ngIf=\"!isPreview \" class=\"line-element\">\n              <div></div>\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n            <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n                'font-family': field?.style?.font || 'Helvetica Neue',\n                'font-weight': field?.style?.bold ? '700' : '400',\n                'font-size': (field?.style?.fontSize || 12) + 'px',\n                'width': (field?.width || 100) + '%',\n                'text-align': field.textAlign || 'left',\n                'border-radius': '5px',\n                'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n                'border-color': field.lineColor || field?.style?.color || '#000000',\n                'border-width': (field.lineWidth || 1) + 'px 0 0 0',\n                'color': field?.style?.color || '#000000',\n                'margin-top': (field?.style?.paddingTop || 0) + 'px',\n                'margin-bottom': (field?.style?.paddingBottom ?? 10) + 'px'\n              }\" />\n          </div>\n  \n          <!--SKS25MAR25 Image Upload Element -->\n          <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [class.highlight]=\"selectedFieldIndex === i && !isPreview \" draggable=\"true && !isPreview \"\n            (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" \n            (mouseenter)=\"isImageHover = true;\"\n            (mouseleave)=\"isImageHover = false;\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label-container\">\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div>\n                    <div class=\"logo-container\" [ngStyle]=\"{ 'justify-content': field?.style?.alignment || '' }\">\n                      <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                        <div style=\"display: flex; justify-content: end;\">\n                          <i (click)=\"onImageEdit(field)\" class=\"fusion-icon nav-icon fusion-icon-edit_pencil\" style=\"margin: 0px !important; font-size: 16px !important; color: #787486;\"></i>\n                          <svg (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                              d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                              d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                              stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                              stroke-linejoin=\"round\" />\n                          </svg>\n                        </div>\n                        <img [src]=\"field.imageData\" [style.width.px]=\"field.imageSize?.width || 100\" [style.height.px]=\"field.imageSize?.height || 100\" />\n                      </div>\n  \n                      <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                        <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                          <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                          <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                        </label>\n                        <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                          style=\"display: none;\" />\n                      </div>\n                    </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- Space Element -->\n          <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div *ngIf=\"!isPreview \" class=\"field-content\">\n                <div class=\"label-container\">\n                  <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <!-- SKS21NOV25  signaturePad -->\n          <div *ngIf=\"field?.type === 'signaturePad'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              \n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n              \n              \n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div  *ngIf=\"!isPreview \" 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                <!-- SKS21NOV25 Signature Pad Field -->\n                <div class=\"signature-pad-container\">\n                  <!-- SKS21NOV25 Builder mode (editable) -->\n                  <canvas *ngIf=\"!isPreview\"\n                    #sigCanvas\n                    [id]=\"field.id\"\n                    class=\"signature-pad\"\n                    (pointerdown)=\"pointerDown($event, field)\"\n                    (pointermove)=\"pointerMove($event, field)\"\n                    (pointerup)=\"pointerUp($event, field)\"\n                    (pointercancel)=\"pointerUp($event, field)\"\n                    (lostpointercapture)=\"pointerUp($event, field)\">\n                  </canvas>\n\n                  <!-- SKS21NOV25 Preview mode (static image) -->\n                  <img *ngIf=\"isPreview && field.value\"\n                      [src]=\"field.value\"\n                      class=\"signature-preview\" />\n                  <!-- SKS21NOV25 Empty state in preview -->\n                  <div *ngIf=\"isPreview && !field.value\"\n                      class=\"signature-placeholder\">\n                      Signature\n                  </div>\n                  <!-- SKS21NOV25 Builder buttons -->\n                  <div *ngIf=\"!isPreview\" class=\"signature-actions\">\n                      <button type=\"button\" (click)=\"onQuestionChange($event.value, field)\">Save</button>\n                      <button type=\"button\" (click)=\"clearSignature(field)\">Clear</button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!-- SKS16SEP25 Date, currency, boolean, text -->\n          <div *ngIf=\"field?.type === 'date' || field?.type === 'currency' ||  field?.type === 'boolean' || field?.type === 'text' || field?.type === 'Section' || field?.type === 'RichText' || field?.type === 'Note' || field?.type === 'PageBreak' || field?.type === 'PdfMake'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [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                <ng-container [ngSwitch]=\"field?.type\">\n                  <div *ngSwitchCase=\"'Section'\" class=\"pdf-section-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    {{ displayFieldValue(field) }}\n                  </div>\n\n                  <div *ngSwitchCase=\"'Note'\" class=\"pdf-note-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    {{ displayFieldValue(field) }}\n                  </div>\n\n                  <div *ngSwitchCase=\"'RichText'\" class=\"pdf-richtext-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    <ng-container *ngFor=\"let line of getRichTextLines(field); let lineIndex = index\">\n                      <div *ngIf=\"isRichTextHeading(field, lineIndex, line)\" class=\"pdf-richtext-heading\">\n                        {{ getRichTextLineText(line) }}\n                      </div>\n                      <div *ngIf=\"!isRichTextHeading(field, lineIndex, line) && !isRichTextBullet(line)\" class=\"pdf-richtext-line\">\n                        {{ line }}\n                      </div>\n                      <div *ngIf=\"isRichTextBullet(line)\" class=\"pdf-richtext-bullet\">\n                        <span>\u2022</span>\n                        <span>{{ getRichTextLineText(line) }}</span>\n                      </div>\n                    </ng-container>\n                  </div>\n\n                  <div *ngSwitchCase=\"'PageBreak'\" class=\"pdf-pagebreak-render\">\n                    <span>Page break</span>\n                  </div>\n\n                  <div *ngSwitchCase=\"'PdfMake'\" class=\"pdfmake-render\">\n                    <div class=\"pdfmake-title\">Advanced pdfmake content</div>\n                    <pre>{{ getPdfMakePreview(field) }}</pre>\n                  </div>\n\n                  <ng-container *ngSwitchCase=\"'boolean'\">\n                    <nxt-input *ngIf=\"!isPreview\" [type]=\"'checkbox'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"field\" [labelFont]=\"\"\n                      [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\" [readOnly]=\"field.isReadOnly\"\n                      [currency]=\"selectedCurrency\" [label]=\"field?.questionText\" [inputWeight]=\"\"\n                      [showLabel]=\"field?.questionText ? true : false\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                      [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"false\"\n                      inputBgColor=\"#ffffff\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\" [textAlign]=\"field?.style?.alignment || ''\"\n                      [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event.value, field)\">\n                    </nxt-input>\n\n                    <div *ngIf=\"isPreview\" class=\"pdf-text-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                      <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"pdf-field-label\" [ngStyle]=\"getElementLabelStyle(field)\">\n                        {{ field.questionText }}\n                      </div>\n                      <div class=\"pdf-field-value\">{{ displayFieldValue(field) }}</div>\n                    </div>\n                  </ng-container>\n\n                  <div *ngSwitchDefault class=\"pdf-text-render\" [ngStyle]=\"getElementTextStyle(field)\">\n                    <div *ngIf=\"field?.questionText && field?.showLabelInPdf\" class=\"pdf-field-label\" [ngStyle]=\"getElementLabelStyle(field)\">\n                      {{ field.questionText }}\n                    </div>\n                    <ng-container *ngIf=\"shouldRenderStyledTextLines(field); else plainTextValue\">\n                      <div *ngFor=\"let line of getStyledTextLines(field); let lineIndex = index\"\n                        class=\"pdf-field-value\"\n                        [class.pdf-text-heading-line]=\"isTextHeadingLine(field, lineIndex, line)\"\n                        [class.pdf-text-empty-line]=\"!line\"\n                        [ngStyle]=\"getStyledTextLineStyle(field, lineIndex, line)\">\n                        {{ line || ' ' }}\n                      </div>\n                    </ng-container>\n                    <ng-template #plainTextValue>\n                      <div class=\"pdf-field-value\">{{ displayFieldValue(field) }}</div>\n                    </ng-template>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n            <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n              [ngStyle]=\"{\n                position: 'absolute',\n                background: '#fff',\n                border: '1px solid #ccc',\n                padding: '6px 10px',\n                'border-radius': '4px',\n                'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                'z-index': '65535',\n                display: 'flex',\n                'text-align': 'center',\n                gap: '8px'\n              }\">\n          \n              <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                <option [value]=\"12\">12pt</option>\n                <option [value]=\"14\">14pt</option>\n                <option [value]=\"16\">16pt</option>\n                <option [value]=\"18\">18pt</option>\n                <option [value]=\"24\">24pt</option>\n              </select>\n  \n              <label title=\"Text Color\" class=\"color-label\">\n              <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n              <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n              </label>\n  \n              <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n            \n              <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n  \n  \n            \n              <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n              </button>\n            \n              <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n              </button>\n          \n              <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n            </div>\n          </div>\n  \n          <!-- Pdf -->\n          <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'text-align': field?.style?.alignment || '',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview \"\n            draggable=\"true && !isPreview \" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n            (drop)=\"onDrop($event, i)\">\n            <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg> \n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n                <div *ngIf=\"field?.pdfReferenceQuestions\" class=\"pdf-nested-render\">\n                  <app-booklet [referenceKey]=\"field?.pdfReference\" [questions]=\"field?.pdfReferenceQuestions[field?.pdfReference]\" [isPreview]=\"isPreview\" [currencySymbol]=\"getCurrencySymbol()\" (questionChange)=\"onQuestionChange($event.value, $event.field)\"></app-booklet>\n                </div>\n              </div>\n            </div>\n          </div>\n  \n          <!--  Table  -->\n          <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" [ngClass]=\"{'isPreview': isPreview}\" [ngStyle]=\"{ display: field.isHidden ? 'none' : 'block' }\" (click)=\"selectElement(i)\"\n            [ngStyle]=\"{\n              'font-family': field?.style?.font || 'Helvetica Neue',\n              'font-size': (field?.style?.fontSize || 12) + 'px',\n              'width': (field?.width || 100) + '%',\n              'border-radius': '5px',\n              'color': field?.style?.color || '#000000',\n              'font-style': field?.style?.italic ? 'italic' : 'normal',\n              'font-weight': field?.style?.bold ? '700' : '400',\n              'padding': \n                (field?.style?.margin?.[1] || 0) + 'px '  +\n                (field?.style?.margin?.[2] || 0) + 'px '  +\n                (field?.style?.margin?.[3] || 0) + 'px '  +\n                (field?.style?.margin?.[0] || 0) + 'px ' ,\n            }\" [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 table-field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n              <div class=\"field-content\">\n                <div *ngIf=\"!isPreview \" class=\"label2-container\">\n                  <div>\n                    <div *ngIf=\"field.questionText && field.type != 'checkbox'\" \n                      [ngStyle]=\"{\n                        'padding-top': field.type  === 'label' ? '10px' : '',\n                        \n                      }\"  [style.font-weight]=\"field.labelWeight ||  field.type  === 'label' ? 'bold' : 'normal'\" [style.font-size]=\"field.labelSize || field.type  === 'label' ? '16px' : '14px'\"\n                      style=\"display: flex; gap: 5px;\"> \n                      {{ field.questionText }}\n                      <div *ngIf=\"field.questionText && field.type  != 'checkbox' && field.required && field.showLabel \" style=\"color: red;\">*</div>\n                      <div *ngIf=\"field.questionText && field?.helpText\" [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                        </svg>\n                      </div>\n                    </div>\n                  </div>\n                  <div class=\"top-right\">\n                    <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                    <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                  </div>\n                </div>\n                <div *ngIf=\"!field.questionText && field?.helpText\" style=\"display: flex; justify-content: flex-end;\">\n                  <svg  [matTooltip]=\"field?.helpText\" matTooltipClass=\"white-tooltip label-container\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.00009 0.615356C3.90779 0.615356 0.615479 3.90766 0.615479 7.99997C0.615479 12.0923 3.90779 15.3846 8.00009 15.3846C12.0924 15.3846 15.3847 12.0923 15.3847 7.99997C15.3847 3.90766 12.0924 0.615356 8.00009 0.615356ZM8.00012 13.5385C4.92319 13.5385 2.46165 11.0769 2.46165 8C2.46165 4.92307 4.92319 2.46153 8.00012 2.46153C11.077 2.46153 13.5386 4.92307 13.5386 8C13.5386 11.0769 11.077 13.5385 8.00012 13.5385ZM8.00027 4.33846C8.52335 4.33846 8.92335 4.73846 8.92335 5.26153C8.92335 5.78461 8.52335 6.18461 8.00027 6.18461C7.47719 6.18461 7.07719 5.78461 7.07719 5.26153C7.07719 4.73846 7.47719 4.33846 8.00027 4.33846ZM9.53859 10.8C9.53859 10.9538 9.41552 11.0769 9.2309 11.0769H6.76936C6.61552 11.0769 6.46167 10.9846 6.46167 10.8V10.1846C6.46167 10.0308 6.58475 9.84614 6.76936 9.84614C6.92321 9.84614 7.07706 9.75383 7.07706 9.56921V8.33844C7.07706 8.1846 6.95398 7.99998 6.76936 7.99998C6.61552 7.99998 6.46167 7.90767 6.46167 7.72306V7.10767C6.46167 6.95383 6.58475 6.76921 6.76936 6.76921H8.61552C8.76936 6.76921 8.92321 6.92306 8.92321 7.10767V9.56921C8.92321 9.72306 9.04629 9.84614 9.2309 9.84614C9.38475 9.84614 9.53859 9.99998 9.53859 10.1846V10.8Z\" fill=\"#747474\"/>\n                  </svg>\n                </div>\n                <div class=\"nxt-table-container\">\n                  <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\"\n                    [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                    tableWidth=\"auto\" isEditable=true isPreview=isPreview (columnSelected)=\"selectElement(i);columnSelected($event)\"\n                    [data]=\"field.value?.data\" [serialNumberColumn]=\"false\"\n                    [summaryValues]=\"field.value?.summaryValues || field.value?.summaryValue\"\n                    (valueChange)=\"onQuestionChange($event, field)\"\n                    (removeColumn)=removeColumn($event)>\n                  </nxt-datatable>\n                </div>\n              </div>\n            </div>\n          </div>\n        </ng-container>\n          </div>\n          <!-- SKS26MAY26 pdf footer -->\n          <div *ngIf=\"shouldShowFooterOnCanvas()\" class=\"pdf-page-footer\" [ngStyle]=\"getFooterStyle()\">\n            <div class=\"pdf-running-band\" [ngStyle]=\"getRunningBandBorderStyle('footer')\">\n              <ng-container *ngIf=\"getRunningBandColumns('footer').length === 3; else singleFooter\">\n                <span>{{ getRunningBandColumns('footer')[0] }}</span>\n                <span>{{ getRunningBandColumns('footer')[1] }}</span>\n                <span>{{ getRunningBandColumns('footer')[2] }}</span>\n              </ng-container>\n              <ng-template #singleFooter>\n                <span class=\"pdf-running-single\">{{ getRunningBandColumns('footer')[0] }}</span>\n              </ng-template>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"!isPropertyHide && isPreview\" style=\"width: 25%; margin-bottom:10px\">\n        <div style=\"padding-top: 0px; padding-bottom: 8px; padding-left: 8px;padding-right: 8px\">\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff;\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'Preview' }}</button>\n          <button class=\"priview-action-div\" style=\"background-color: #585653; color: #ffff\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'Download' }}</button>\n          <div class=\"color-picker\">\n            <label>Change Color</label>\n            <div class=\"colors\">\n              <!-- Default colors -->\n              <div class=\"color-swatch\" *ngFor=\"let color of defaultColors\" \n                   [style.background]=\"color\"\n                   (click)=\"selectColor(color)\">\n              </div>\n          \n              <!-- Last box: custom color picker with eyedropper -->\n              <label class=\"color-swatch custom-picker\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" shape-rendering=\"geometricPrecision\" text-rendering=\"geometricPrecision\" image-rendering=\"optimizeQuality\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" viewBox=\"0 0 512 512\"><path fill=\"#FC3E81\" d=\"M171.11 171.836L74.204 75.761c.258-.26.517-.521.777-.78C124.688 25.274 189.751.292 254.899.013l.587 136.448c-32.992.139-62.827 13.641-84.376 35.375z\"/><path fill=\"#FD6096\" d=\"M255.486 136.461L254.899.003 256 0c70.296 0 133.967 28.342 180.232 74.212l-96.068 96.898c-21.605-21.421-51.337-34.655-84.164-34.655-.172 0-.343.005-.514.006z\"/><path fill=\"#F9B200\" d=\"M340.164 171.11l96.075-96.906c.26.258.521.517.78.777 49.707 49.707 74.689 114.77 74.968 179.918l-136.448.587c-.139-32.992-13.641-62.827-35.375-84.376z\"/><path fill=\"#C0FF66\" d=\"M375.539 255.486l136.458-.587L512 256c0 70.296-28.342 133.967-74.212 180.232l-96.898-96.068c21.421-21.605 34.655-51.337 34.655-84.164 0-.172-.005-.343-.006-.514z\"/><path fill=\"#1DD1D9\" d=\"M340.89 340.164l96.906 96.075c-.258.26-.517.521-.777.78-49.707 49.707-114.77 74.689-179.918 74.968l-.587-136.448c32.992-.139 62.827-13.641 84.376-35.375z\"/><path fill=\"#64BDFF\" d=\"M256.514 375.539l.587 136.458L256 512c-70.296 0-133.967-28.342-180.232-74.212l96.068-96.898c21.605 21.421 51.337 34.655 84.164 34.655.172 0 .343-.005.514-.006z\"/><path fill=\"#43A3F9\" d=\"M171.836 340.89l-96.075 96.906c-.26-.258-.521-.517-.78-.777C25.274 387.312.292 322.249.013 257.101l136.448-.587c.139 32.992 13.641 62.827 35.375 84.376z\"/><path fill=\"#7884EA\" d=\"M136.461 256.514l-136.458.587L0 256c0-70.296 28.342-133.967 74.212-180.232l96.898 96.068c-21.421 21.605-34.655 51.337-34.655 84.164 0 .172.005.343.006.514z\"/></svg>\n                <input type=\"color\" (change)=\"selectColor($event.target.value)\">\n              </label>\n            </div>\n          </div> \n           <!-- SKS22JUL25 Dropdown -->\n           <nxt-dropdown  \n              [options]=\"currencyOptions\"\n              [id]=\"bookletId\" \n              [selectedValue]=\"selectedCurrency\"\n              [labelColor]=\"'#ffff'\"\n              [inputTextColor]=\"'#ffff'\"\n              [inputBgColor]=\"'#585653'\"\n              placeholder=\"\" [from]=\"'normalDropDown'\"\n              [apiMeta] = \"{'field': 'name','isObject': true}\"\n              (valueChange)=\"currencyChange($event.value.valueObj)\">\n          </nxt-dropdown>    \n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview \" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n        <div style=\"height: 200px;\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n        </div>\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:25%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{border-radius:5px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.delete-icon{width:15px;height:15px}.field-container{border:1px solid #d5d5d5;background-color:#f8f8f8;transition:background .2s}.field-container.isPreview{border:none;background-color:#fff}.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);min-height:250px;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.pdf-page{position:relative;width:794px;min-height:1123px;margin:12px auto 28px;box-shadow:0 18px 45px #0f172a29;overflow:hidden}.pdf-page-content{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-start;min-height:100%;box-sizing:border-box}.pdf-watermark{position:absolute;top:50%;left:50%;z-index:0;width:900px;text-align:center;font-weight:700;letter-spacing:0;pointer-events:none;-webkit-user-select:none;user-select:none}.pdf-page-footer,.pdf-page-header{position:absolute;z-index:2;min-height:24px;white-space:pre-wrap}.pdf-running-band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;padding:8px 0}.pdf-running-band span{overflow-wrap:anywhere}.pdf-running-band span:nth-child(2){text-align:center}.pdf-running-band span:nth-child(3){text-align:right}.pdf-running-single{grid-column:1 / -1;text-align:inherit!important}.pdf-text-render{min-height:16px;white-space:pre-wrap;overflow-wrap:anywhere;box-sizing:border-box}.pdf-field-label{margin-bottom:2px}.pdf-field-value{min-height:16px}.pdf-text-heading-line{line-height:1.05}.pdf-text-empty-line{font-size:0}.pdf-section-render{width:100%;min-height:32px;box-sizing:border-box;overflow-wrap:anywhere}.pdf-note-render{width:100%;min-height:34px;border:1px solid currentColor;box-sizing:border-box;overflow-wrap:anywhere;white-space:pre-wrap}.pdf-richtext-render{width:100%;white-space:normal;overflow-wrap:anywhere}.pdf-richtext-heading{color:var(--pdf-heading-color, #2f9e44);font-weight:600;margin-bottom:8px}.pdf-richtext-line{margin-bottom:7px}.pdf-richtext-bullet{display:grid;grid-template-columns:14px minmax(0,1fr);gap:4px;margin-bottom:7px}.pdf-pagebreak-render{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;color:#64748b;font-size:11px;border:1px dashed #94a3b8;background:#f8fafc;text-transform:uppercase;letter-spacing:0}.pdfmake-render{width:100%;border:1px dashed #94a3b8;background:#f8fafc;color:#334155;padding:10px;box-sizing:border-box}.pdfmake-title{font-size:11px;font-weight:700;margin-bottom:6px}.pdfmake-render pre{margin:0;max-height:160px;overflow:auto;white-space:pre-wrap;font-size:11px}.pdf-table-render{width:100%;overflow-x:auto}.pdf-nested-render{width:100%;padding:0}.pdf-table-render table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:inherit}.pdf-table-render th,.pdf-table-render td{border:1px solid #cfd8d1;padding:6px;vertical-align:top;overflow-wrap:anywhere}.pdf-table-render th{cursor:pointer;position:relative}.pdf-table-render th:hover{outline:2px solid rgba(85,146,253,.45);outline-offset:-2px}.pdf-table-render .pdf-table-column-selected{box-shadow:inset 0 0 0 2px #5592fd}.pdf-summary-row td{border-color:transparent;background:transparent}.pdf-summary-label{color:#555;text-align:right}.pdf-summary-value{color:#222;font-weight:600}.pdf-page .field-container,.pdf-page .line-field{background:transparent;border:1px solid transparent;box-sizing:border-box}.pdf-page .field-container.highlight,.pdf-page .line-field.highlight{border-color:#5592fd!important;background:#eff8ff8c}.field-content{display:flex;flex-direction:column}.label-container{display:flex;justify-content:flex-end;align-items:center}.label2-container{display:flex;justify-content:space-between;align-items:center}.top-right{display:flex;align-items:center;gap:3px;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:1px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:flex-start;align-items:center;width:100%;overflow-x:auto;overflow-y:hidden}nxt-datatable{width:max-content!important;min-width:100%;max-width:none}.table-field-wrapper{overflow-x:auto;overflow-y:hidden}:host ::ng-deep .nxt-table-container .table-layout,:host ::ng-deep .nxt-table-container .custom-table,:host ::ng-deep .nxt-table-container .table-row{min-width:800px}:host ::ng-deep .nxt-table-container .table-cell:not(.sticky-column):not(.actionCol){flex:0 0 92px;width:92px!important;min-width:92px;max-width:92px}:host ::ng-deep .nxt-table-container .nxtTableHeader{min-width:92px}:host ::ng-deep .nxt-table-container .nxtTableHeader[data-column-id=ngnxtTM0xwMZqrrr]{flex-basis:130px;width:130px!important;min-width:130px;max-width:130px}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;height:300px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;width:35px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media(max-width:600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}.priview-action-div{padding:10px 15px;border-radius:8px;border:none;width:100%;margin-bottom:10px}.colors{display:flex;gap:8px}.color-swatch{width:28px;height:28px;border-radius:6px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center}.color-swatch:hover{border:2px solid #999}.custom-picker{position:relative;overflow:hidden;padding:2px;border:1px solid gray}.custom-picker input[type=color]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer}.picker-icon{width:16px;height:16px;pointer-events:none}.signature-pad-container{width:100%;position:relative}.signature-pad{width:100%;height:90px;border:1px dashed #aaa;border-radius:6px;touch-action:none}.signature-preview{width:100%;height:90px;object-fit:contain;border:1px solid #ccc;border-radius:6px}.signature-placeholder{width:100%;height:90px;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa}.signature-actions{margin-top:5px;display:flex;justify-content:space-between}\n"] }]
         }], ctorParameters: () => [{ type: DataService }, { type: ChangeService }, { type: CountryService }, { type: PdfDesignerService }], propDecorators: { textareas: [{
                 type: ViewChildren,
                 args: ['autoTextarea']
@@ -63290,12 +65108,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], isPropertyHide: [{
                 type: Input
+            }], pdfDefinitionOptions: [{
+                type: Input
             }], pdfSaveHandlerEmit: [{
                 type: Output
             }], templateMode: [{
                 type: Output
             }], pdfPreviewEmit: [{
                 type: Output
+            }], pdfOutputEmit: [{
+                type: Output
             }] } });
 
 //AP-25JUN25- common-fields.constants.ts
@@ -65466,14 +67288,14 @@ class ElementComponent {
         this.translationService.setFormBuilderLanguage(this.languageCode);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ElementComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FormBuilderService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <nxt-dropdown \n        [options]=\"langOption\" \n        [selectedValue]=\"languageCode\" \n        [from]=\"'normalDropDown'\"\n        [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n        style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </nxt-dropdown>\n    </div>\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- SKS12FEB26 TextBox and default element -->\n      <div *ngIf=\"field.type === 'Text' || field.type === 'currency' || !statictype.includes(field.type)\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n      <!-- MSM-09JUL25 Icon-selectir Element -->\n      <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"choose-icon-placeholder\">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF',\n          'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n        }\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n                nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date & Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n      <!-- SKS7AUG25 month -->\n      <div *ngIf=\"field.type === 'month'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" \n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{field.questionText ? field.questionText : ('SELECT_MONTH' | nxtCustomTranslate : 'Select Month')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"month\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n                  nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\" from=\"formBuilder\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n            'font-family': field?.font || 'Helvetica Neue',\n            'font-weight': field?.fontWeight || '400',\n            'font-size': field?.fontSize || '14px',\n            'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n            'text-align': field?.textAlign || 'left',\n            'border-radius': '5px',\n            'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n            'color': field?.color || '#000000',\n            'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n            'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n            'border-color': field?.color || '#EFF8FF'\n          }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{  option.label  }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown' || field.type === 'MultiSelect'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{  option.label  }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n                (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:10px;cursor:grab}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;min-height:250px;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:15px;height:15px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "isLoading", "onlyView", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent", "formEditEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "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", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <nxt-dropdown \n        [options]=\"langOption\" \n        [selectedValue]=\"languageCode\" \n        [from]=\"'normalDropDown'\"\n        [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n        style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </nxt-dropdown>\n    </div>\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- SKS12FEB26 TextBox and default element -->\n      <div *ngIf=\"field.type === 'Text' || field.type === 'currency' || !statictype.includes(field.type)\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n      <!-- MSM-09JUL25 Icon-selectir Element -->\n      <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"choose-icon-placeholder\">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF',\n          'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n        }\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n                nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date & Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n      <!-- SKS7AUG25 month -->\n      <div *ngIf=\"field.type === 'month'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" \n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{field.questionText ? field.questionText : ('SELECT_MONTH' | nxtCustomTranslate : 'Select Month')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"month\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n                  nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\" from=\"formBuilder\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n            'font-family': field?.font || 'Helvetica Neue',\n            'font-weight': field?.fontWeight || '400',\n            'font-size': field?.fontSize || '14px',\n            'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n            'text-align': field?.textAlign || 'left',\n            'border-radius': '5px',\n            'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n            'color': field?.color || '#000000',\n            'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n            'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n            'border-color': field?.color || '#EFF8FF'\n          }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{  option.label  }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown' || field.type === 'MultiSelect'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{  option.label  }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n                (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n          'font-family': field?.font || 'Helvetica Neue',\n          'font-weight': field?.fontWeight || '400',\n          'font-size': field?.fontSize || '14px',\n          'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n          'text-align': field?.textAlign || 'left',\n          'border-radius': '5px',\n          'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n          'color': field?.color || '#000000',\n          'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n          'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n          'border-color': field?.color || '#EFF8FF'\n        }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:10px;cursor:grab}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;min-height:250px;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:15px;height:15px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent$1, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "isLoading", "onlyView", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent", "formEditEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "summaryValues", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "hideSaveButton", "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", "isPreview", "groupFilter", "groupFilterConfig", "groupFilterColumn", "onlyView", "tableHeight", "serialNumberColumn"], outputs: ["tableRowClick", "onEditData", "onSaveData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableParamsEmit"] }, { kind: "component", type: nxtDropdown, selector: "nxt-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "readOnly", "error", "fromShengel", "question", "mode", "from", "padding", "onlyView", "labelFont", "label", "labelColor", "inputTextColor", "labelSize", "inputValueSize", "labelWeight", "inputWeight", "showLabel", "inputBorder", "inputBgColor", "inputIconLeftSrc"], outputs: ["valueChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: ElementComponent, decorators: [{
             type: Component,
             args: [{ selector: "app-element", standalone: true, imports: [
                         CommonModule,
                         FormsModule,
-                        BookletComponent,
+                        BookletComponent$1,
                         NxtDatatable,
                         nxtDropdown,
                         NxtCustomTranslatePipe
@@ -65538,14 +67360,14 @@ class NxtAppModule {
             NxtInput,
             NxtMultiSelect,
             QuestionnaireComponent,
-            BookletComponent,
+            BookletComponent$1,
             QuestionbookComponent,
             NxtButtonComponent,
             IconSelectorComponent, //MSM10JUL25 import icon selector component
             PdfDesignerComponent,
             FormComponent], exports: [NxtAppComponent,
             QuestionnaireComponent,
-            BookletComponent,
+            BookletComponent$1,
             NxtDatatable,
             NxtSearchBox,
             ListViewFilterComponent,
@@ -65571,7 +67393,7 @@ class NxtAppModule {
             NxtInput,
             NxtMultiSelect,
             QuestionnaireComponent,
-            BookletComponent,
+            BookletComponent$1,
             QuestionbookComponent,
             NxtButtonComponent,
             IconSelectorComponent, //MSM10JUL25 import icon selector component
@@ -65590,7 +67412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                         NxtInput,
                         NxtMultiSelect,
                         QuestionnaireComponent,
-                        BookletComponent,
+                        BookletComponent$1,
                         QuestionbookComponent,
                         NxtButtonComponent,
                         IconSelectorComponent, //MSM10JUL25 import icon selector component
@@ -65601,7 +67423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     exports: [NxtAppComponent,
                         QuestionnaireComponent,
-                        BookletComponent,
+                        BookletComponent$1,
                         NxtDatatable,
                         NxtSearchBox,
                         ListViewFilterComponent,
@@ -65633,5 +67455,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BookletComponent, FormComponent, IconSelectorComponent, ListViewFilterComponent, NxtAppComponent, NxtAppModule, NxtAppService, NxtButtonComponent, NxtDatatable, NxtDatePipe, NxtFileUpload, NxtInput, NxtMultiSelect, NxtSearchBox, PdfDesignerComponent, QuestionnaireComponent, SalesforceService, initializeApp, nxtDropdown };
+export { BookletComponent$1 as BookletComponent, FormComponent, IconSelectorComponent, ListViewFilterComponent, NxtAppComponent, NxtAppModule, NxtAppService, NxtButtonComponent, NxtDatatable, NxtDatePipe, NxtFileUpload, NxtInput, NxtMultiSelect, NxtSearchBox, PdfDesignerComponent, PdfDesignerService, QuestionnaireComponent, SalesforceService, initializeApp, nxtDropdown };
 //# sourceMappingURL=rangertechnologies-ngnxt.mjs.map