npm - @rangertechnologies/ngnxt - Versions diffs - 2.1.255-beta → 2.1.256 - Mend

@rangertechnologies/ngnxt 2.1.255-beta → 2.1.256

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/fesm2022/rangertechnologies-ngnxt.mjs +15 -12
package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
package/lib/pages/questionbook/questionbook.component.d.ts +2 -1
package/package.json +1 -1
package/rangertechnologies-ngnxt-2.1.256.tgz +0 -0
package/rangertechnologies-ngnxt-2.1.255-beta.tgz +0 -0

package/fesm2022/rangertechnologies-ngnxt.mjs CHANGED Viewed

@@ -7195,7 +7195,7 @@ class NxtCustomTranslatePipe {
         if (from !== 'formBuilder' && this.cache.has(key)) {
             return this.cache.get(key);
         }
-        const translated = this.translationService.translate(key);
+        const translated = from !== 'formBuilder' ? this.translationService.translate(key) : this.translationService.formBuilderTranslate(key, 'en');
         const result = translated || fallback || (from === 'formBuilder' ? null : key);
         if (from !== 'formBuilder')
             this.cache.set(key, result);
@@ -54664,7 +54664,7 @@ class NxtDatatable {
         this.hadleDropDownDependent.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NxtDatatable, deps: [{ token: i0.ChangeDetectorRef }, { token: TranslationService }, { token: i0.Renderer2 }, { token: DataService }, { token: ChangeService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableParamsEmit: "NxtTableParamsEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n            style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\"\n                    style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </div>\n            </div>\n\n            <div class=\"flex\" style=\"align-items: center;\">\n                <div *ngIf=\"searchBar\" class=\"search\">\n                    <div class=\"flex search-bar\">\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n                                stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"\n                #tableContainer (scroll)=\"onScroll(tableContainer)\">\n                <ng-container>\n                    <div class=\"custom-table\">\n                        <!--SKS15FEB25 Table Header -->\n                        <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n                            <div class=\"table-row\">\n                                <!--SKS15FEB25 Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                  </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell tableHeader head-color\"\n                                        [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                        [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n                                        [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n                                        (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\" [style.width]=\"column.width || '100px'\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                                    class=\"close-column-btn\"\n                                                    (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n                                                    \u2715\n                                                </div>\n                                                <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n                                                    @if(column.labelPath){\n                                                        {{ column.labelPath | nxtCustomTranslate : column.label }}\n                                                    }\n                                                   @else if(from !== 'formBuilder') {\n                                                    {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                   }\n                                                   @else {\n                                                    {{ column.label }}\n                                                   }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n                                                        style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                        viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                            stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <!--SKS15FEB25 Red dot for active filter -->\n                                                        <circle\n                                                            *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n                                                            cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                    </svg>\n                                                    <div *ngIf=\"column.sort\"\n                                                        class=\"sort-indicators\">\n                                                        <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n                                                            {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                            === 'desc' ? '\u2193' : '' }}\n                                                        </span>\n                                                        <span\n                                                            *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n                                                            class=\"sort-direction\">\n                                                            \u2191\n                                                        </span>\n                                                    </div>\n                                                    <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n                                                        class=\"search-component position-absolute\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\">\n                                                                    <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                        <div class=\"fsearch-bar\">\n                                                                            <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                                viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                                xmlns=\"http://www.w3.org/2000/svg\">\n                                                                                <path\n                                                                                    d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                                <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                            </svg>\n                                                                            <input class=\"width-100\" type=\"text\"\n                                                                                placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                        class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                        viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                                        <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path\n                                                                            d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                    </svg>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                            style=\"gap: 5px;\">\n                                                                            <input type=\"checkbox\"\n                                                                                [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                                [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                            <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <!-- Enhanced resize handle -->\n                                            <div class=\"resize-handle\" \n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\"></div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    style=\"padding: 12px !important;\">\n                                    {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-col-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; ellipsis\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\"\n                                        [style.max-width]=\"column.width || '100px'\">\n                                        <div>\n                                            <div>\n                                               <!-- SKS22JUL25 calendar  -->\n                                                <div *ngIf=\"column.type === 'calendar'\">\n                                                    <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n                                                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                                                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                                                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                                                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                                                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                                                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                                                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                                                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                                                    </app-custom-model> -->\n                                                </div>\n\n                                                <!-- SKS22JUL25 for pick location -->\n                                                <app-pick-location  *ngIf=\"column.type === 'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </app-pick-location>\n\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngIf=\"column.type === 'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path\n                                                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                                fill=\"#6C757D\" />\n                                                        </svg>\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path\n                                                                d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path\n                                                                d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path\n                                                                d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                                stroke-linejoin=\"round\" />\n                                                        </svg>\n                                                    </div> -->\n                                                    <img *ngIf=\"column.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.question?.isReadOnly\" class=\"logo-container\">\n                                                        Logo preview area\n                                                        <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n                                                            <img [src]=\"column.question?.imageData\" />\n                                                        </div>\n\n                                                        Upload button\n                                                        <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n                                                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                                                <span>Upload Image</span>\n                                                            </label>\n                                                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                                                (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n                                                        </div>\n                                                    </div> -->\n                                                </div>\n                                                <!-- SKS22JUL25 icon-selector -->\n                                                <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"column.type === 'icon'\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n                                                    [labelColor]=\"column.question?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\"></nxt-icon-selector>\n\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngIf=\"column.type === 'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngIf=\"column.type === 'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n                                                    (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n                                                </nxt-datatable>\n                                                <!-- SKS22JUL25 list -->\n                                                <nxt-search-box  *ngIf=\"column.type === 'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" \n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n                                                </nxt-search-box>\n\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <app-custom-dropdown *ngIf=\"column?.type === 'dropdown' && column.question?.options\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n                                                    placeholder=\"\"\n                                                    [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n                                                    [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </app-custom-dropdown>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <div *ngIf=\"column.type === 'radio' && column.question?.options\" class=\"\">\n                                                    <app-custom-radio [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                        [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n                                                        [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n                                                        [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                        (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                    </app-custom-radio>\n                                                </div>\n\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <app-file-upload *ngIf=\"column.type === 'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </app-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button\n                                                    *ngIf=\"column.type === 'button'\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n                                                    (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n                                                    >\n                                                </nxt-button>\n                                                <!-- SKS22JUL25 book type -->\n                                                <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n                                                    [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n                                                    (handleDropDown)=\"getDropDown($event)\">\n                                                </lib-questionbook> -->\n                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input  *ngIf=\"column.type === undefined || column.type === 'text' || column.type === 'email' || column.type === 'number' || column.type === 'label' || column.type === 'boolean' || column.type === 'richtextarea' || column.type === 'datetime' || column.type === 'date' || column.type === 'time' || column.type === 'textarea'\"\n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName \"\n                                                    [hyperLink]=\"column.hyperLink\"\n                                                    (hyperlinkEmit)=\"onClickHyperlink(column.fieldName,element, column.hyperLink)\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n                                                    [labelColor]=\"column.question?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\"\n                                                    [inputValueSize]=\"column.question?.fontSize\"\n                                                    [labelWeight]=\"column.question?.fontWeight\"\n                                                    [inputWeight]=\"column.question?.fontWeight\"\n                                                    [showLabel]=\"column.question?.style?.showLabel\"\n                                                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                    [placeholder]=\"column.question?.question\"\n                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\n                                                    [inputId]=\"column.question?.trackingId\"\n                                                    [errorMessages]=\"{ required: 'This field is required' }\"\n                                                    [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n                                                    [minDate]=\"column.question?.minDate\"\n                                                    [rows]=\"3\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\"\n                                            matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" 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\"\n                                                        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\"\n                                                        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\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 Render inline buttons up to Size -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"i < actionButtonArray?.size\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n                                                    (click)=\"actionButtonClicked(button,element)\"\n                                                    (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n                                                    (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                        <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn,element)\">\n                                                        <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n                                                            {{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- SKS20MAR25 Summary Rows -->\n                        <ng-container\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\"\n                                                class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last\"\n                                        class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n                                        @if (row?.columns?.includes(col.fieldName)) {\n                                        {{ summaryValues[col.fieldName] | number }}\n                                        }\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n                                </div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n            <!--SKS15FEB25 No Data Row -->\n            <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\"\n                class=\"no-data\">\n                {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n            </div>\n            <!--SKS15FEB25 Pagination -->\n            <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n                        (click)=\"addTableRecord(inlineElement)\"\n                        matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (event)=\"pageParams($event)\">\n                </nxt-pagination>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n    aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteModal = false\"></button>\n            </div>\n            <div class=\"modal-body\">\n                {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n                    'NO'| nxtCustomTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell{position:relative;min-width:50px;padding:12px 0 12px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;min-width:50px;padding:10px 0 10px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden;padding-right:8px}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:absolute;right:-1px;top:0;bottom:0;width:1px;cursor:col-resize;background:#ccc;z-index:10;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:unset!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;left:0!important;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:3px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #000}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: NxtSearchFilterPipe, name: "searchFilter" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from"], outputs: ["searchValueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableFilterArray", "selectedView", "displayedColumns", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: NxtDatatable, isStandalone: true, selector: "nxt-datatable", inputs: { data: "data", tableFilterData: "tableFilterData", columns: "columns", withCheckBox: "withCheckBox", searchBar: "searchBar", tableSaveButton: "tableSaveButton", stickyColumn: "stickyColumn", tableWidth: "tableWidth", actionColumHeader: "actionColumHeader", actionButton: "actionButton", title: "title", isButtons: "isButtons", buttonArray: "buttonArray", tableId: "tableId", isEditRow: "isEditRow", isDeleteRow: "isDeleteRow", addInlineRecord: "addInlineRecord", searchConfigs: "searchConfigs", direction: "direction", pagination: "pagination", actionButtonArray: "actionButtonArray", multipleFilter: "multipleFilter", isPagination: "isPagination", isNosIndicator: "isNosIndicator", isEditable: "isEditable", from: "from", question: "question", rowTextSize: "rowTextSize", rowTextColor: "rowTextColor", apiMeta: "apiMeta", summaryRows: "summaryRows", summaryColumns: "summaryColumns", isLoading: "isLoading", tableConfig: "tableConfig", tableParams: "tableParams", listViews: "listViews", mode: "mode", languageCode: "languageCode", selectedColumn: "selectedColumn", allIcons: "allIcons" }, outputs: { tableRowClick: "tableRowClick", onEditData: "onEditData", saveButtonData: "saveButtonData", onDeleteData: "onDeleteData", buttonEmit: "buttonEmit", hyperLinkEmit: "hyperLinkEmit", sideNavEmit: "sideNavEmit", actionButtonEmit: "actionButtonEmit", columnSelected: "columnSelected", removeColumn: "removeColumn", valueChange: "valueChange", selectedValues: "selectedValues", fileEmit: "fileEmit", NxtTableParamsEmit: "NxtTableParamsEmit", NxtTableFilterEmit: "NxtTableFilterEmit", hadleDropDownDependent: "hadleDropDownDependent", NxtTableEmit: "NxtTableEmit" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n            style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\"\n                    style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </div>\n            </div>\n\n            <div class=\"flex\" style=\"align-items: center;\">\n                <div *ngIf=\"searchBar\" class=\"search\">\n                    <div class=\"flex search-bar\">\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n                                stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"\n                #tableContainer (scroll)=\"onScroll(tableContainer)\">\n                <ng-container>\n                    <div class=\"custom-table\">\n                        <!--SKS15FEB25 Table Header -->\n                        <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n                            <div class=\"table-row\">\n                                <!--SKS15FEB25 Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                  </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell tableHeader head-color\"\n                                        [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                        [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n                                        [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n                                        (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\" [style.width]=\"column.width || '100px'\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                                    class=\"close-column-btn\"\n                                                    (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n                                                    \u2715\n                                                </div>\n                                                <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n                                                    @if(column.labelPath){\n                                                        {{ column.labelPath | nxtCustomTranslate : column.label }}\n                                                    }\n                                                   @else if(from !== 'formBuilder') {\n                                                    {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                   } \n                                                   @else if(column.uniqueIdentifier) {\n                                                    {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                   }\n                                                   @else {\n                                                    {{ column.label }}\n                                                   }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n                                                        style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                        viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                            stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <!--SKS15FEB25 Red dot for active filter -->\n                                                        <circle\n                                                            *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n                                                            cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                    </svg>\n                                                    <div *ngIf=\"column.sort\"\n                                                        class=\"sort-indicators\">\n                                                        <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n                                                            {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                            === 'desc' ? '\u2193' : '' }}\n                                                        </span>\n                                                        <span\n                                                            *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n                                                            class=\"sort-direction\">\n                                                            \u2191\n                                                        </span>\n                                                    </div>\n                                                    <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n                                                        class=\"search-component position-absolute\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\">\n                                                                    <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                        <div class=\"fsearch-bar\">\n                                                                            <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                                viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                                xmlns=\"http://www.w3.org/2000/svg\">\n                                                                                <path\n                                                                                    d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                                <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                            </svg>\n                                                                            <input class=\"width-100\" type=\"text\"\n                                                                                placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                        class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                        viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                                        <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path\n                                                                            d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                    </svg>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                            style=\"gap: 5px;\">\n                                                                            <input type=\"checkbox\"\n                                                                                [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                                [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                            <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <!-- Enhanced resize handle -->\n                                            <div class=\"resize-handle\" \n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\"></div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    style=\"padding: 12px !important;\">\n                                    {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-col-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; ellipsis\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\"\n                                        [style.max-width]=\"column.width || '100px'\">\n                                        <div>\n                                            <div>\n                                               <!-- SKS22JUL25 calendar  -->\n                                                <div *ngIf=\"column.type === 'calendar'\">\n                                                    <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n                                                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                                                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                                                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                                                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                                                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                                                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                                                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                                                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                                                    </app-custom-model> -->\n                                                </div>\n\n                                                <!-- SKS22JUL25 for pick location -->\n                                                <app-pick-location  *ngIf=\"column.type === 'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </app-pick-location>\n\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngIf=\"column.type === 'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path\n                                                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                                fill=\"#6C757D\" />\n                                                        </svg>\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path\n                                                                d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path\n                                                                d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path\n                                                                d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                                stroke-linejoin=\"round\" />\n                                                        </svg>\n                                                    </div> -->\n                                                    <img *ngIf=\"column.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.question?.isReadOnly\" class=\"logo-container\">\n                                                        Logo preview area\n                                                        <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n                                                            <img [src]=\"column.question?.imageData\" />\n                                                        </div>\n\n                                                        Upload button\n                                                        <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n                                                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                                                <span>Upload Image</span>\n                                                            </label>\n                                                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                                                (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n                                                        </div>\n                                                    </div> -->\n                                                </div>\n                                                <!-- SKS22JUL25 icon-selector -->\n                                                <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"column.type === 'icon'\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n                                                    [labelColor]=\"column.question?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\"></nxt-icon-selector>\n\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngIf=\"column.type === 'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngIf=\"column.type === 'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n                                                    (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n                                                </nxt-datatable>\n                                                <!-- SKS22JUL25 list -->\n                                                <nxt-search-box  *ngIf=\"column.type === 'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" \n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n                                                </nxt-search-box>\n\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <app-custom-dropdown *ngIf=\"column?.type === 'dropdown' && column.question?.options\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n                                                    placeholder=\"\"\n                                                    [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n                                                    [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </app-custom-dropdown>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <div *ngIf=\"column.type === 'radio' && column.question?.options\" class=\"\">\n                                                    <app-custom-radio [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                        [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n                                                        [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n                                                        [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                        (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                    </app-custom-radio>\n                                                </div>\n\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <app-file-upload *ngIf=\"column.type === 'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </app-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button\n                                                    *ngIf=\"column.type === 'button'\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n                                                    (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n                                                    >\n                                                </nxt-button>\n                                                <!-- SKS22JUL25 book type -->\n                                                <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n                                                    [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n                                                    (handleDropDown)=\"getDropDown($event)\">\n                                                </lib-questionbook> -->\n                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input  *ngIf=\"column.type === undefined || column.type === 'text' || column.type === 'email' || column.type === 'number' || column.type === 'label' || column.type === 'boolean' || column.type === 'richtextarea' || column.type === 'datetime' || column.type === 'date' || column.type === 'time' || column.type === 'textarea'\"\n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName \"\n                                                    [hyperLink]=\"column.hyperLink\"\n                                                    (hyperlinkEmit)=\"onClickHyperlink(column.fieldName,element, column.hyperLink)\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n                                                    [labelColor]=\"column.question?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\"\n                                                    [inputValueSize]=\"column.question?.fontSize\"\n                                                    [labelWeight]=\"column.question?.fontWeight\"\n                                                    [inputWeight]=\"column.question?.fontWeight\"\n                                                    [showLabel]=\"column.question?.style?.showLabel\"\n                                                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                    [placeholder]=\"column.question?.question\"\n                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\n                                                    [inputId]=\"column.question?.trackingId\"\n                                                    [errorMessages]=\"{ required: 'This field is required' }\"\n                                                    [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n                                                    [minDate]=\"column.question?.minDate\"\n                                                    [rows]=\"3\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\"\n                                            matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" 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\"\n                                                        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\"\n                                                        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\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 Render inline buttons up to Size -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"i < actionButtonArray?.size\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n                                                    (click)=\"actionButtonClicked(button,element)\"\n                                                    (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n                                                    (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                        <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn,element)\">\n                                                        <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n                                                            {{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- SKS20MAR25 Summary Rows -->\n                        <ng-container\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\"\n                                                class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last\"\n                                        class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n                                        @if (row?.columns?.includes(col.fieldName)) {\n                                        {{ summaryValues[col.fieldName] | number }}\n                                        }\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n                                </div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n            <!--SKS15FEB25 No Data Row -->\n            <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\"\n                class=\"no-data\">\n                {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n            </div>\n            <!--SKS15FEB25 Pagination -->\n            <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n                        (click)=\"addTableRecord(inlineElement)\"\n                        matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (event)=\"pageParams($event)\">\n                </nxt-pagination>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n    aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteModal = false\"></button>\n            </div>\n            <div class=\"modal-body\">\n                {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n                    'NO'| nxtCustomTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell{position:relative;min-width:50px;padding:12px 0 12px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;min-width:50px;padding:10px 0 10px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden;padding-right:8px}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:absolute;right:-1px;top:0;bottom:0;width:1px;cursor:col-resize;background:#ccc;z-index:10;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:unset!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;left:0!important;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #000}\n"], dependencies: [{ kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtPagination, selector: "nxt-pagination", inputs: ["pageSizeOptions", "collectionSize", "pageSize", "currentPage", "maxSize", "firstLastButtons", "nextPreviousButtons", "small"], outputs: ["event"] }, { kind: "pipe", type: NxtSearchFilterPipe, name: "searchFilter" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "pipe", type: NxtGetValuePipe, name: "getValue" }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from"], outputs: ["searchValueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "component", type: ListViewFilterComponent, selector: "app-list-view-filter", inputs: ["listViews", "tableFilterArray", "selectedView", "displayedColumns", "availableOperators"], outputs: ["listViewEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }, { kind: "pipe", type: QuestionByRowPipe, name: "questionByRow" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NxtDatatable, decorators: [{
             type: Component,
@@ -54689,7 +54689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         NxtCustomTranslatePipe,
                         QuestionByRowPipe
                         // RowResizerDirective
-                    ], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n            style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\"\n                    style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </div>\n            </div>\n\n            <div class=\"flex\" style=\"align-items: center;\">\n                <div *ngIf=\"searchBar\" class=\"search\">\n                    <div class=\"flex search-bar\">\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n                                stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"\n                #tableContainer (scroll)=\"onScroll(tableContainer)\">\n                <ng-container>\n                    <div class=\"custom-table\">\n                        <!--SKS15FEB25 Table Header -->\n                        <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n                            <div class=\"table-row\">\n                                <!--SKS15FEB25 Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                  </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell tableHeader head-color\"\n                                        [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                        [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n                                        [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n                                        (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\" [style.width]=\"column.width || '100px'\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                                    class=\"close-column-btn\"\n                                                    (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n                                                    \u2715\n                                                </div>\n                                                <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n                                                    @if(column.labelPath){\n                                                        {{ column.labelPath | nxtCustomTranslate : column.label }}\n                                                    }\n                                                   @else if(from !== 'formBuilder') {\n                                                    {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                   }\n                                                   @else {\n                                                    {{ column.label }}\n                                                   }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n                                                        style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                        viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                            stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <!--SKS15FEB25 Red dot for active filter -->\n                                                        <circle\n                                                            *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n                                                            cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                    </svg>\n                                                    <div *ngIf=\"column.sort\"\n                                                        class=\"sort-indicators\">\n                                                        <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n                                                            {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                            === 'desc' ? '\u2193' : '' }}\n                                                        </span>\n                                                        <span\n                                                            *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n                                                            class=\"sort-direction\">\n                                                            \u2191\n                                                        </span>\n                                                    </div>\n                                                    <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n                                                        class=\"search-component position-absolute\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\">\n                                                                    <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                        <div class=\"fsearch-bar\">\n                                                                            <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                                viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                                xmlns=\"http://www.w3.org/2000/svg\">\n                                                                                <path\n                                                                                    d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                                <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                            </svg>\n                                                                            <input class=\"width-100\" type=\"text\"\n                                                                                placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                        class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                        viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                                        <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path\n                                                                            d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                    </svg>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                            style=\"gap: 5px;\">\n                                                                            <input type=\"checkbox\"\n                                                                                [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                                [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                            <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <!-- Enhanced resize handle -->\n                                            <div class=\"resize-handle\" \n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\"></div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    style=\"padding: 12px !important;\">\n                                    {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-col-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; ellipsis\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\"\n                                        [style.max-width]=\"column.width || '100px'\">\n                                        <div>\n                                            <div>\n                                               <!-- SKS22JUL25 calendar  -->\n                                                <div *ngIf=\"column.type === 'calendar'\">\n                                                    <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n                                                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                                                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                                                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                                                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                                                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                                                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                                                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                                                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                                                    </app-custom-model> -->\n                                                </div>\n\n                                                <!-- SKS22JUL25 for pick location -->\n                                                <app-pick-location  *ngIf=\"column.type === 'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </app-pick-location>\n\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngIf=\"column.type === 'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path\n                                                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                                fill=\"#6C757D\" />\n                                                        </svg>\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path\n                                                                d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path\n                                                                d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path\n                                                                d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                                stroke-linejoin=\"round\" />\n                                                        </svg>\n                                                    </div> -->\n                                                    <img *ngIf=\"column.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.question?.isReadOnly\" class=\"logo-container\">\n                                                        Logo preview area\n                                                        <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n                                                            <img [src]=\"column.question?.imageData\" />\n                                                        </div>\n\n                                                        Upload button\n                                                        <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n                                                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                                                <span>Upload Image</span>\n                                                            </label>\n                                                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                                                (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n                                                        </div>\n                                                    </div> -->\n                                                </div>\n                                                <!-- SKS22JUL25 icon-selector -->\n                                                <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"column.type === 'icon'\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n                                                    [labelColor]=\"column.question?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\"></nxt-icon-selector>\n\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngIf=\"column.type === 'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngIf=\"column.type === 'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n                                                    (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n                                                </nxt-datatable>\n                                                <!-- SKS22JUL25 list -->\n                                                <nxt-search-box  *ngIf=\"column.type === 'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" \n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n                                                </nxt-search-box>\n\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <app-custom-dropdown *ngIf=\"column?.type === 'dropdown' && column.question?.options\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n                                                    placeholder=\"\"\n                                                    [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n                                                    [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </app-custom-dropdown>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <div *ngIf=\"column.type === 'radio' && column.question?.options\" class=\"\">\n                                                    <app-custom-radio [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                        [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n                                                        [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n                                                        [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                        (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                    </app-custom-radio>\n                                                </div>\n\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <app-file-upload *ngIf=\"column.type === 'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </app-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button\n                                                    *ngIf=\"column.type === 'button'\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n                                                    (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n                                                    >\n                                                </nxt-button>\n                                                <!-- SKS22JUL25 book type -->\n                                                <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n                                                    [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n                                                    (handleDropDown)=\"getDropDown($event)\">\n                                                </lib-questionbook> -->\n                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input  *ngIf=\"column.type === undefined || column.type === 'text' || column.type === 'email' || column.type === 'number' || column.type === 'label' || column.type === 'boolean' || column.type === 'richtextarea' || column.type === 'datetime' || column.type === 'date' || column.type === 'time' || column.type === 'textarea'\"\n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName \"\n                                                    [hyperLink]=\"column.hyperLink\"\n                                                    (hyperlinkEmit)=\"onClickHyperlink(column.fieldName,element, column.hyperLink)\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n                                                    [labelColor]=\"column.question?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\"\n                                                    [inputValueSize]=\"column.question?.fontSize\"\n                                                    [labelWeight]=\"column.question?.fontWeight\"\n                                                    [inputWeight]=\"column.question?.fontWeight\"\n                                                    [showLabel]=\"column.question?.style?.showLabel\"\n                                                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                    [placeholder]=\"column.question?.question\"\n                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\n                                                    [inputId]=\"column.question?.trackingId\"\n                                                    [errorMessages]=\"{ required: 'This field is required' }\"\n                                                    [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n                                                    [minDate]=\"column.question?.minDate\"\n                                                    [rows]=\"3\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\"\n                                            matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" 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\"\n                                                        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\"\n                                                        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\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 Render inline buttons up to Size -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"i < actionButtonArray?.size\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n                                                    (click)=\"actionButtonClicked(button,element)\"\n                                                    (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n                                                    (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                        <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn,element)\">\n                                                        <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n                                                            {{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- SKS20MAR25 Summary Rows -->\n                        <ng-container\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\"\n                                                class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last\"\n                                        class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n                                        @if (row?.columns?.includes(col.fieldName)) {\n                                        {{ summaryValues[col.fieldName] | number }}\n                                        }\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n                                </div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n            <!--SKS15FEB25 No Data Row -->\n            <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\"\n                class=\"no-data\">\n                {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n            </div>\n            <!--SKS15FEB25 Pagination -->\n            <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n                        (click)=\"addTableRecord(inlineElement)\"\n                        matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (event)=\"pageParams($event)\">\n                </nxt-pagination>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n    aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteModal = false\"></button>\n            </div>\n            <div class=\"modal-body\">\n                {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n                    'NO'| nxtCustomTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell{position:relative;min-width:50px;padding:12px 0 12px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;min-width:50px;padding:10px 0 10px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden;padding-right:8px}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:absolute;right:-1px;top:0;bottom:0;width:1px;cursor:col-resize;background:#ccc;z-index:10;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:unset!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;left:0!important;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:3px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #000}\n"] }]
+                    ], template: "<div class=\"table-layout\" [id]=\"tableId\" [ngStyle]=\"{'padding-top': '1px', 'width': tableWidth}\" [dir]=\"direction\">\n    <div>\n        <div *ngIf=\"title\" class=\"d-flex justify-content-center table-title align-text-center\">\n            {{title}}\n        </div>\n        <div *ngIf=\"isNosIndicator || searchBar || isButtons\" class=\"flex justify-content-between\"\n            style=\"padding-bottom: 20px;\">\n            <div class=\"flex\">\n                <!-- SKS26APR25 List View Filter -->\n                <app-list-view-filter *ngIf=\"listViews && listViews.length > 0\" [listViews]=\"listViews\"\n                    [selectedView]=\"selectedView\" [displayedColumns]='columns' [tableFilterArray]=\"tableFilterArray\"\n                    (listViewEmit)=\"listViewEmit($event)\">\n                </app-list-view-filter>\n                <div *ngIf=\"(!listViews || listViews.length === 0) && isNosIndicator\" class=\"noOfRec\"\n                    style=\"display: flex; align-items: flex-end;\">\n                    <p style=\"font-weight: 500; margin-right: 5px; margin-bottom: 0px;\">\n                        {{ 'NOS' | nxtCustomTranslate : 'Nos'}} </p>\n                    <div style=\"color: rgb(43, 87, 249);\">{{totalRecords || totalCount}}</div>\n                </div>\n            </div>\n\n            <div class=\"flex\" style=\"align-items: center;\">\n                <div *ngIf=\"searchBar\" class=\"search\">\n                    <div class=\"flex search-bar\">\n                        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                stroke=\"#787486\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M21.6295 20.1667L19.7271 18.3333\" stroke=\"#787486\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                        </svg>\n                        <input type=\"text\" placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                            (keyup)=\"searchConfigs ? emptySearch($event.target.value) : applyFilter($event.target.value)\"\n                            [value]=\"searchBoxValue || ''\" #input>\n                        <svg *ngIf=\"searchConfigs && searchBar\" class=\"configSearch\" (click)=\"onSearch(input.value)\"\n                            width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path d=\"M14 5H20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M14 8H17\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                            <path d=\"M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2\"\n                                stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M22 22L20 20\" stroke=\"#ffffff\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                </div>\n\n                <div class=\"flex\" *ngIf=\"isButtons\" style=\"padding-left: 7px; gap: 7px;\">\n                    <div class=\"flex\" *ngFor=\"let button of buttonArray\">\n                        <nxt-button class=\"data-table-fsbtn\"\n                            (buttonClickEmit)=\"(button.type === 'group' || button.type === 'dropdown') ? commonButtonClick($event) : commonButtonClick(button)\"\n                            [buttonType]=\"button.class\"\n                            [buttonValue]=\"button.labelPath || button.label || button.name | nxtCustomTranslate : button.label || button.name \"\n                            [buttonConfig]=\"button.buttonConfig\" [type]=\"button.type\" class=\"ms-2 me-2\"\n                            [btnIconLeftSrc]=\"button.btnIconLeftSrc\" [isImageSvg]=\"button.isImageSvg\">\n                        </nxt-button>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"table-margin\">\n            <div class=\"table-container\"\n                [ngClass]=\"{ 'resizing': isResizing }\"\n                [ngStyle]=\"{ maxHeight: isPagination ? '450px' : 'auto', minHeight: dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder' ? '0px' : '100px' }\"\n                #tableContainer (scroll)=\"onScroll(tableContainer)\">\n                <ng-container>\n                    <div class=\"custom-table\">\n                        <!--SKS15FEB25 Table Header -->\n                        <div class=\"table-header\" [ngClass]=\"{ 'shadow': isScrolled }\">\n                            <div class=\"table-row\">\n                                <!--SKS15FEB25 Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-cell sticky-column head-color\" [style.width]=\"'50px'\">\n                                    <input type=\"checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"masterToggle()\"\n                                           [checked]=\"selection?.hasValue()\"\n                                           [indeterminate]=\"selection?.hasValue() && !isAllSelected()\"\n                                           class=\"custom-checkbox\">\n                                  </div>\n\n                                <!--SKS15FEB25 Data Columns -->\n                                <ng-container *ngFor=\"let column of currentColumns; let i = index\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-cell tableHeader head-color\"\n                                        [class.sticky-column]=\"i === (stickyCondition - 1)\"\n                                        [class.active-column]=\"activeColumn === column.uniqueIdentifier\"\n                                        [class.selected-column]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(column.uniqueIdentifier); column.sort ? sortData(column.fieldName) : ''\"\n                                        (mouseenter)=\"hoveredColumn = column.fieldName\" (mouseleave)=\"hoveredColumn = null\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\">\n                                        <div class=\"columnDiv\">\n                                            <div class=\"column-header\" [style.width]=\"column.width || '100px'\">\n                                                <!-- Add close button for selected column -->\n                                                <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                                    class=\"close-column-btn\"\n                                                    (click)=\"$event.stopPropagation(); removeCol(column.uniqueIdentifier)\">\n                                                    \u2715\n                                                </div>\n                                                <div class=\"ellipsis\" style=\"flex: 1;\" [title]=\"column.label\">\n                                                    @if(column.labelPath){\n                                                        {{ column.labelPath | nxtCustomTranslate : column.label }}\n                                                    }\n                                                   @else if(from !== 'formBuilder') {\n                                                    {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                   } \n                                                   @else if(column.uniqueIdentifier) {\n                                                    {{ (column.uniqueIdentifier+'.label') | nxtCustomTranslate : column.label }}\n                                                   }\n                                                   @else {\n                                                    {{ column.label }}\n                                                   }\n                                                </div>\n                                                <div>\n                                                    <svg *ngIf=\"column.filter\"\n                                                        (click)=\"$event.stopPropagation(); filter(column.fieldName)\"\n                                                        style=\"padding-right: 2px;\" width=\"12\" height=\"11\"\n                                                        viewBox=\"0 0 12 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M10.75 1.25H0.75L4.75 5.71722V8.80556L6.75 9.75V5.71722L10.75 1.25Z\"\n                                                            stroke=\"#242533\" stroke-width=\"1.2\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <!--SKS15FEB25 Red dot for active filter -->\n                                                        <circle\n                                                            *ngIf=\"filterDataArray && filterDataArray[column.fieldName]?.length > 0\"\n                                                            cx=\"9\" cy=\"2\" r=\"2.5\" fill=\"red\"></circle>\n                                                    </svg>\n                                                    <div *ngIf=\"column.sort\"\n                                                        class=\"sort-indicators\">\n                                                        <span *ngIf=\"currentSortColumn === column.fieldName\" class=\"sort-direction\">\n                                                            {{ currentSortDirection === 'asc' ? '\u2191' : currentSortDirection\n                                                            === 'desc' ? '\u2193' : '' }}\n                                                        </span>\n                                                        <span\n                                                            *ngIf=\"hoveredColumn === column.fieldName && currentSortColumn !== column.fieldName\"\n                                                            class=\"sort-direction\">\n                                                            \u2191\n                                                        </span>\n                                                    </div>\n                                                    <div *ngIf=\"searchFilter && column.fieldName === selectedFilter\"\n                                                        class=\"search-component position-absolute\"\n                                                        (click)=\"$event.stopPropagation();\">\n                                                        <div class=\"card\">\n                                                            <div class=\"content\">\n                                                                <div class=\"flex\">\n                                                                    <div class=\"fsearch\" [class.resized]=\"isResized\">\n                                                                        <div class=\"fsearch-bar\">\n                                                                            <svg class=\"searchSvg\" width=\"18\" height=\"20\"\n                                                                                viewBox=\"0 0 24 22\" fill=\"none\"\n                                                                                xmlns=\"http://www.w3.org/2000/svg\">\n                                                                                <path\n                                                                                    d=\"M11.6413 19.25C16.6322 19.25 20.6781 15.3511 20.6781 10.5417C20.6781 5.73218 16.6322 1.83333 11.6413 1.83333C6.6504 1.83333 2.60449 5.73218 2.60449 10.5417C2.60449 15.3511 6.6504 19.25 11.6413 19.25Z\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                                <path d=\"M21.6295 20.1667L19.7271 18.3333\"\n                                                                                    stroke=\"#787486\" stroke-width=\"1.5\"\n                                                                                    stroke-linecap=\"round\"\n                                                                                    stroke-linejoin=\"round\" />\n                                                                            </svg>\n                                                                            <input class=\"width-100\" type=\"text\"\n                                                                                placeholder=\"{{ 'SEARCH' | nxtCustomTranslate : 'Search'  }}\"\n                                                                                [(ngModel)]=\"searchText\"\n                                                                                class=\"searchinput\">\n                                                                        </div>\n                                                                    </div>\n                                                                    <svg *ngIf=\"isResized\" (click)=\"closefilter()\"\n                                                                        class=\"close-icon\" width=\"24\" height=\"24\"\n                                                                        viewBox=\"0 0 24 24\" fill=\"none\"\n                                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                                        <path d=\"M9.16998 14.83L14.83 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path d=\"M14.83 14.83L9.16998 9.17001\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                        <path\n                                                                            d=\"M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z\"\n                                                                            stroke=\"currentColor\" stroke-width=\"1.5\"\n                                                                            stroke-linecap=\"round\"\n                                                                            stroke-linejoin=\"round\" />\n                                                                    </svg>\n                                                                </div>\n                                                                <div class=\"filter-content\" [style]=\"'overflow-y: auto'\">\n                                                                    <div *ngFor=\"let data of filterArray | searchFilter : searchText\">\n                                                                        <div class=\"mt-3 mb-3 checkboxdiv\"\n                                                                            style=\"gap: 5px;\">\n                                                                            <input type=\"checkbox\"\n                                                                                [checked]=\"isSelected(data)\" [value]=\"data\"\n                                                                                [id]=\"data\" (change)=\"checkedData(data)\">\n                                                                            <div class=\"ms-2 label-data\">{{data}}</div>\n                                                                        </div>\n                                                                    </div>\n                                                                </div>\n                                                            </div>\n                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <!-- Enhanced resize handle -->\n                                            <div class=\"resize-handle\" \n                                            (mousedown)=\"onResizeStart($event)\"\n                                            title=\"Drag to resize column\"></div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                    class=\"table-cell head-color actionCol sticky-column\"\n                                    [style.width]=\"'150px'\"\n                                    style=\"padding: 12px !important;\">\n                                    {{ actionColumHeader | nxtCustomTranslate : 'Action'}}\n                                </div>\n                            </div>\n                        </div>\n\n                        <!--SKS15FEB25 Table Body -->\n                        <div class=\"table-body\" *ngIf=\"!isLoading\">\n                            <div *ngFor=\"let element of dataSource.data; let i = index\" class=\"table-row\"\n                                (click)=\"tableClick(element)\">\n                                <!--SKS15FEB25 Checkbox Cell -->\n                                <div *ngIf=\"withCheckBox\" class=\"table-col-cell sticky-column body-color\">\n                                    <input type=\"checkbox\" class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\"\n                                        (change)=\"separateRowSelect(selection.toggle(element), element)\"\n                                        [checked]=\"selection.isSelected(element)\"\n                                        [disabled]=\"(element.isPayProcessed === true)\">\n                                </div>\n\n                                <!--SKS15FEB25 Data Cells -->\n                                <ng-container *ngFor=\"let column of currentColumns; let last = last; ellipsis\">\n                                    <div *ngIf=\"column.summaryColumn !== true && column.summaryRow !== true && column.isHide !== true\"\n                                        class=\"table-col-cell body-color\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === column.uniqueIdentifier\"\n                                        [style.width]=\"column.width || '100px'\"\n                                        [style.flex]=\"'0 0 ' + (column.width || '100px')\"\n                                        [style.min-width]=\"'50px'\"\n                                        [style.max-width]=\"column.width || '100px'\">\n                                        <div>\n                                            <div>\n                                               <!-- SKS22JUL25 calendar  -->\n                                                <div *ngIf=\"column.type === 'calendar'\">\n                                                    <!-- <app-custom-calendar [question]=\"column | questionByRow:element:i\" (eventSelected)=\"getCalendarEvent($event)\"\n                                                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                                                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                                                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                                                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                                                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                                                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                                                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                                                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                                                    </app-custom-model> -->\n                                                </div>\n\n                                                <!-- SKS22JUL25 for pick location -->\n                                                <app-pick-location  *ngIf=\"column.type === 'location'\" [apiKey]=\"column['apiKey']\" [address]=\"question.selectedValue\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (locationSelected)=\"updateEdit(i,$event,element,column.fieldName)\">\n                                                </app-pick-location>\n\n                                                <!-- SKS22JUL25 Image -->\n                                                <div *ngIf=\"column.type === 'image'\" (mouseenter)=\"isImageHover = true;\"\n                                                    (mouseleave)=\"isImageHover = false;\">\n                                                    <!-- <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageEdit(column.question)\" width=\"16\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path\n                                                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                                fill=\"#6C757D\" />\n                                                        </svg>\n                                                        <svg *ngIf=\"!column.question?.isReadOnly\" (click)=\"onImageDelete(column.question)\" width=\"16\" height=\"16\"\n                                                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                            <path\n                                                                d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path\n                                                                d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path\n                                                                d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                                                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                                stroke-linejoin=\"round\" />\n                                                        </svg>\n                                                    </div> -->\n                                                    <img *ngIf=\"column.question?.isReadOnly\" [src]=\"column.question?.imageData\" />\n                                                    <!-- <div *ngIf=\"!column.question?.isReadOnly\" class=\"logo-container\">\n                                                        Logo preview area\n                                                        <div class=\"logo-preview\" *ngIf=\"column.question?.input\">\n                                                            <img [src]=\"column.question?.imageData\" />\n                                                        </div>\n\n                                                        Upload button\n                                                        <div *ngIf=\"!column.question?.imageData\" class=\"logo-upload-placeholder\">\n                                                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                                                <span>Upload Image</span>\n                                                            </label>\n                                                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                                                (change)=\"fileChangeEvent(column.question, $event)\" style=\"display: none;\" />\n                                                        </div>\n                                                    </div> -->\n                                                </div>\n                                                <!-- SKS22JUL25 icon-selector -->\n                                                <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"column.type === 'icon'\" [required]=\"column.question?.isOptional\" [mode]=\"mode\" [question]=\"column | questionByRow:element:i\" [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column?.question?.id+'.questionText') | nxtCustomTranslate : column?.question?.questionText) : ''\"\n                                                    [labelColor]=\"column.question?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\" [labelWeight]=\"column.question?.fontWeight\" [showLabel]=\"column.question?.style?.showLabel\" (iconSelected)=\"updateEdit(i,$event,element,column.fieldName)\"></nxt-icon-selector>\n\n                                                <!-- SKS22JUL25 line -->\n                                                <hr *ngIf=\"column.type === 'line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                                                <!-- SKS22JUL25 data table -->\n                                                <nxt-datatable *ngIf=\"column.type === 'table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"column | questionByRow:element:i\" from=\"formBuilder\"\n                                                    (valueChange)=\"updateEdit(i,$event.data,element,column.fieldName)\" [apiMeta]=\"column.question?.subText\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [tableConfig]=\"column.question?.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\">\n                                                </nxt-datatable>\n                                                <!-- SKS22JUL25 list -->\n                                                <nxt-search-box  *ngIf=\"column.type === 'list'\" [question]=\"column | questionByRow:element:i\" [readOnly]=\"column.question?.isReadOnly\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [placeHolderText]=\"column.question?.question || ''\" \n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view': element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (searchValueChange)=\"updateEdit(i,$event.value,element,column.fieldName,column.type)\">\n                                                </nxt-search-box>\n\n                                                <!-- SKS22JUL25 Dropdown -->\n                                                <app-custom-dropdown *ngIf=\"column?.type === 'dropdown' && column.question?.options\" [options]=\"column.question?.options\" [apiMeta]=\"column.question?.subText\"\n                                                    [id]=\"column.question?.id\" [selectedValue]=\"column.isShengel ? column.question?.input : column.question?.selectedValue\"\n                                                    placeholder=\"\"\n                                                    [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\" [referenceField]=\"column.question?.referenceField\"\n                                                    [readOnly]=\"column.question?.isReadOnly\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                </app-custom-dropdown>\n                                                <!-- SKS22JUL25 custom-radio component -->\n                                                <div *ngIf=\"column.type === 'radio' && column.question?.options\" class=\"\">\n                                                    <app-custom-radio [options]=\"column.question?.options\" [question]=\"column | questionByRow:element:i\" [apiMeta]=\"column.question?.subText\" [id]=\"column.question?.id\"\n                                                        [selectedValue]=\"column.question?.selectedValue\" [errorMessage]=\"column.question?.errorMessage\" [error]=\"column.question?.error\"\n                                                        [referenceField]=\"column.question?.referenceField\" [readOnly]=\"column.question?.isReadOnly\"\n                                                        [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                        (valueChange)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\">\n                                                    </app-custom-radio>\n                                                </div>\n\n                                                <!-- SKS22JUL25 Attachment / Files -->\n                                                <app-file-upload *ngIf=\"column.type === 'file'\" [limitFileUploading]=\"5\" [error]=\"column.question?.error\" [question]=\"column | questionByRow:element:i\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [allFiles]=\"column.question?.input\" (selectedFileData)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </app-file-upload>\n                                                <!-- SKS22JUL25 Button -->\n                                                <nxt-button\n                                                    *ngIf=\"column.type === 'button'\"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\"\n                                                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"column.question?.question\"\n                                                    (buttonClickEmit)=\"updateEdit(i,$event,element,column.fieldName)\"\n                                                    >\n                                                </nxt-button>\n                                                <!-- SKS22JUL25 book type -->\n                                                <!-- <lib-questionbook *ngIf=\"column.type === 'book'\" [qbItem]=\"column.question?.qbItem\"\n                                                    [questions]=\"readQuestions(column.question?.qbReference, column.question?.qbReferenceQuestions)\"\n                                                    (handleDropDown)=\"getDropDown($event)\">\n                                                </lib-questionbook> -->\n                                                <!-- SKS22JUL25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                                                <nxt-input  *ngIf=\"column.type === undefined || column.type === 'text' || column.type === 'email' || column.type === 'number' || column.type === 'label' || column.type === 'boolean' || column.type === 'richtextarea' || column.type === 'datetime' || column.type === 'date' || column.type === 'time' || column.type === 'textarea'\"\n                                                    [type]=\"column.type === 'boolean' ? 'checkbox' : column.type === 'richtextarea' ? 'richtext' : column.type === undefined ? 'text' : column.type \"\n                                                    [mode]=\"from === 'formBuilder' ? element?.editRow && !column.question?.isReadOnly ? 'edit' : 'view' : element?.editRow && (isEditRow || addInlineRecord) ? 'edit' : 'view'\" [from]=\"'nxtTable'\"\n                                                    [value]=\"element | getValue: column.fieldName \"\n                                                    [hyperLink]=\"column.hyperLink\"\n                                                    (hyperlinkEmit)=\"onClickHyperlink(column.fieldName,element, column.hyperLink)\"\n                                                    [question]=\"column | questionByRow:element:i\"\n                                                    [labelFont]=\"column.question?.font\"\n                                                    [label]=\"column.question?.questionText ? ((column.question?.id+'.questionText') | nxtCustomTranslate : column.question?.questionText): ''\"\n                                                    [labelColor]=\"column.question?.fontColor\"\n                                                    [labelSize]=\"column.question?.fontSize\"\n                                                    [inputValueSize]=\"column.question?.fontSize\"\n                                                    [labelWeight]=\"column.question?.fontWeight\"\n                                                    [inputWeight]=\"column.question?.fontWeight\"\n                                                    [showLabel]=\"column.question?.style?.showLabel\"\n                                                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                                                    [placeholder]=\"column.question?.question\"\n                                                    [required]=\"column.question?.isOptional\" inputBgColor=\"#FAFAFA\"\n                                                    [inputId]=\"column.question?.trackingId\"\n                                                    [errorMessages]=\"{ required: 'This field is required' }\"\n                                                    [inputIconLeftSrc]=\"column.question?.iconLeftSrc\" \n                                                    [minDate]=\"column.question?.minDate\"\n                                                    [rows]=\"3\"\n                                                    (inputValue)=\"updateEdit(i,$event.value.valueObj,element,column.fieldName)\"\n                                                    >\n                                                </nxt-input>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n\n                                <!--SKS15FEB25 Action Buttons -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"table-col-cell actionCol\">\n                                    <div class=\"actionButton\" style=\"display: flex; align-items: center;\">\n\n                                        <!--SKS15FEB25 Edit Button -->\n                                        <div *ngIf=\"isEditRow\" class=\"eicon-container\"\n                                            matTooltip=\"{{ 'EDIT_RECORD' | nxtCustomTranslate : 'Edit Record'  }}\"\n                                            style=\"padding: 2px; border: 1px solid #dcdcdc; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\" edit-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #f5f5f5;\">\n                                                <svg (click)=\"onEdit(element)\" width=\"16\" height=\"16\"\n                                                    viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                                    <path\n                                                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                                        fill=\"#6C757D\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n\n                                        <!--SKS15FEB25 Delete Button -->\n                                        <div *ngIf=\"isDeleteRow\" class=\"dicon-container\"\n                                            [matTooltip]=\"'DELETE_RECORD' | nxtCustomTranslate : 'Delete Record'\"\n                                            style=\"padding: 2px; border: 1px solid #ffb5b5; border-radius: 5px; margin-left: 3px; margin-right: 3px;\">\n                                            <div class=\"delete-icon\"\n                                                style=\"padding: 2px 4px; border-radius: 5px; background-color: #feeeed;\">\n                                                <svg (click)=\"deleteRecord(element,i)\" 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\"\n                                                        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\"\n                                                        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\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                    <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\"\n                                                        stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                        stroke-linejoin=\"round\" />\n                                                </svg>\n                                            </div>\n                                        </div>\n\n                                        <!--SKS15FEB25 Render inline buttons up to Size -->\n                                        <div *ngFor=\"let button of actionButtonArray?.buttonArray; let i = index\">\n                                            <div *ngIf=\"i < actionButtonArray?.size\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div *ngIf=\"isConditionMet(element, button.conditions)\"\n                                                    [matTooltip]=\"button.tooltipPath || button.tooltip | nxtCustomTranslate : button.tooltip \"\n                                                    (click)=\"actionButtonClicked(button,element)\"\n                                                    (mouseenter)=\"$event.target.style.border = '1px solid ' + button.hoverBorderColor\"\n                                                    (mouseleave)=\"$event.target.style.border = '1px solid ' + button.borderColor\"\n                                                    style=\"padding: 2px; border-radius: {{button.borderRadius}}px;  border: 1px solid {{button.borderColor}};\">\n                                                    <div (mouseenter)=\"$event.target.style.backgroundColor = button.hoverBackgroundColor\"\n                                                        (mouseleave)=\"$event.target.style.backgroundColor = button.backgroundColor\"\n                                                        style=\"padding: {{button.padding}}px {{button.padding + 2}}px; border-radius: {{button.borderRadius}}px; background-color: {{button.backgroundColor}};\">\n                                                        <img *ngIf=\"button.iconSrc\" #imgElement [src]=\"button.iconSrc\"\n                                                            (mouseenter)=\"imgElement.src = button.hoverIconSrc || button.iconSrc\"\n                                                            (mouseleave)=\"imgElement.src = button.iconSrc\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div *ngIf=\"dropdownActionButton && dropdownActionButton.length > 0\"\n                                            class=\"dropdown\">\n                                            <div class=\"clickable-img\" (click)=\"toggleDropdown(i)\"\n                                                style=\" margin-left: 3px; margin-right: 3px;\">\n                                                <div\n                                                    style=\"background-color: #f5f5f5; padding: 2px 4px; border-radius: 5px;\">\n                                                    <svg style=\"background-color: #f5f5f5; border-radius: 5px; border: 1px solid #6c757d;\"\n                                                        width=\"16\" height=\"16\" viewBox=\"0 0 40 40\" fill=\"none\"\n                                                        xmlns=\"http://www.w3.org/2000/svg\">\n                                                        <path\n                                                            d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\"\n                                                            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\"\n                                                            stroke-miterlimit=\"10\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                        <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\"\n                                                            stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                                            stroke-linejoin=\"round\" />\n                                                    </svg>\n                                                </div>\n                                            </div>\n\n                                            <div class=\"dropdown-menu\"\n                                                [style.right]=\"((actionButtonArray?.size ?? 0) - (actionButtonArray?.buttonArray?.size ?? 0) + (isEditRow ? 1 : 0) + (isDeleteRow ? 1 : 0) + (dropdownActionButton?.length > 0 ? 1 : 0)) * 100 + '%'\"\n                                                *ngIf=\"currentOpenIndex === i\">\n                                                <div *ngFor=\"let btn of dropdownActionButton\">\n                                                    <button *ngIf=\"isConditionMet(element, btn.conditions)\"\n                                                        [attr.data-id]=\"element.id\" style=\"display: flex;\" type=\"button\"\n                                                        class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n                                                        [matTooltip]=\"btn.tooltipPath || btn.tooltip | nxtCustomTranslate : btn.tooltip\"\n                                                        [disabled]=\"btn.buttonDisable\"\n                                                        (click)=\"actionButtonClicked(btn,element)\">\n                                                        <img *ngIf=\"btn.iconSrc\" [src]=\"btn.iconSrc\">\n                                                        <div class=\"fc-btn-text\" style=\"padding-left: 10px;\">\n                                                            {{btn.name}}</div>\n                                                    </button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- SKS20MAR25 Summary Rows -->\n                        <ng-container\n                            *ngIf=\"summaryRows && summaryRows.length > 0 && dataSource.data && dataSource?.data?.length > 0 && !isLoading\">\n                            <ng-container *ngIf=\"!isFullTableSummaryRow && isSummaryColumn\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- Label in the first column -->\n                                    <div *ngIf=\"withCheckBox\" class=\"non-summary-table-cell\"></div>\n                                    <!-- Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryStartColumn; let last = last\"\n                                        class=\"non-summary-table-cell\" [class.last-cell]=\"last\">\n                                    </div> <!-- Value or input in the last column -->\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                        (click)=\"$event.stopPropagation(); onColumnClick(row.uniqueIdentifier)\">{{ (row.id+'.label') | nxtCustomTranslate : row?.label }}\n                                    </div>\n                                    <div class=\"summary-table-cell\"\n                                        [class.selected-cell]=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\">\n                                        <ng-container *ngIf=\"row.type === 'calculation'\">\n                                            <!-- Add close button for selected column -->\n                                            <div *ngIf=\"mode === 'edit' && isEditable && selectedColumn === row.uniqueIdentifier\"\n                                                class=\"close-column-btn\"\n                                                (click)=\"$event.stopPropagation(); removeCol(row.uniqueIdentifier)\">\n                                                \u2715\n                                            </div>\n                                            {{ summaryValues[row.fieldName] | number }}\n                                        </ng-container>\n                                        <ng-container *ngIf=\"row.type === 'input'\">\n                                            <input type=\"number\" [(ngModel)]=\"summaryValues[row.fieldName]\"\n                                                (ngModelChange)=\"onSummaryInputChange()\"\n                                                class=\"nxt-lop-input table-width\"\n                                                style=\"font-size: {{ rowTextSize ? rowTextSize : '13px' }}; color: {{rowTextColor ? rowTextColor : '#2c3137'}};\">\n                                        </ng-container>\n                                    </div>\n                                    <!-- SKS20MAR25 Empty cells to align with data columns -->\n                                    <div *ngFor=\"let col of isSummaryEndColumn; let last = last\"\n                                        class=\"non-summary-table-cell\">\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"non-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <!-- SKS13JUN25 full table summary row -->\n                            <ng-container *ngIf=\"isFullTableSummaryRow\">\n                                <div *ngFor=\"let row of summaryRows\" class=\"table-row summary-row\">\n                                    <!-- SKS13JUN25 Checkbox column (if enabled) -->\n                                    <div *ngIf=\"withCheckBox\" class=\"horizontal-summary-table-cell\">\n                                        {{ row.labelPath || row.label | nxtCustomTranslate : row.label }}\n                                    </div>\n\n                                    <!-- SKS13JUN25 summary cell -->\n                                    <div *ngFor=\"let col of currentColumns; let last = last\"\n                                        class=\"horizontal-summary-table-cell\" style=\"text-align: left;\">\n                                        @if (row?.columns?.includes(col.fieldName)) {\n                                        {{ summaryValues[col.fieldName] | number }}\n                                        }\n                                    </div>\n                                    <div *ngIf=\"actionButton || isDeleteRow || isEditRow\"\n                                        class=\"horizontal-summary-table-cell actionCol sticky-column\">\n                                    </div>\n                                </div>\n                            </ng-container>\n                        </ng-container>\n                        <!--SKS28MAR25 In the Loading section -->\n                        <div class=\"table-body\" *ngIf=\"isLoading\">\n                            <!-- Repeat for 5 skeleton rows -->\n                            <div *ngFor=\"let _ of [1,2,3,4,5]\" class=\"table-row\">\n                                <!-- Checkbox Column -->\n                                <div *ngIf=\"withCheckBox\" class=\"skeleton-cell sticky-column\"></div>\n\n                                <!-- Data Columns -->\n                                <div *ngFor=\"let col of currentColumns\" class=\"skeleton-cell \"></div>\n\n                                <!-- Action Column -->\n                                <div *ngIf=\"actionButton || isDeleteRow || isEditRow\" class=\"skeleton-cell actionCol\">\n                                </div>\n                            </div>\n                        </div>\n                        <!-- <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from === 'formBuilder'\" class=\"form-builder-table-box\">\n                            Add  / drags fields from elements sections\n                        </div> -->\n                    </div>\n                </ng-container>\n            </div>\n            <!--SKS15FEB25 No Data Row -->\n            <div *ngIf=\"dataSource.data && dataSource?.data?.length === 0 && !isLoading && from !== 'formBuilder'\"\n                class=\"no-data\">\n                {{'NO_RECORDS_OR_DATA_FOUND' | nxtCustomTranslate : 'No records/data found.'}}\n            </div>\n            <!--SKS15FEB25 Pagination -->\n            <div [class.shadow-hidden]=\"isShadowHidden\">\n                <!-- table input save button changes -->\n                <div class=\"d-flex inlineAdd justify-content-end\">\n                    <div class=\"flex addIconBor cursor-pointer\" *ngIf=\"addInlineRecord \"\n                        (click)=\"addTableRecord(inlineElement)\"\n                        matTooltip=\"{{ 'ADD_RECORD'| nxtCustomTranslate : 'Add Record'}}\">\n                        <div class=\"addIcon\">\n                            <svg class=\"nav-icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24\"\n                                viewBox=\"0 -960 960 960\" width=\"24\">\n                                <path\n                                    d=\"M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z\" />\n                            </svg>\n                        </div>\n                    </div>\n                    <!--SKS15FEB25 removed button disable logic, added another condition for button showing-->\n                    <!--SKS15FEB25 SR06JAN2025 button disable logic for not select any employee-->\n                    <nxt-button *ngIf=\"(tableSaveButton || isEditRow || addInlineRecord) && from != 'formBuilder'\"\n                        buttonType=\"btn btn-primary\" [buttonDisable]=\"selection?.selected?.length === 0\"\n                        (buttonClickEmit)=\"saveButton()\"\n                        buttonValue=\"{{ 'SAVE' | nxtCustomTranslate : 'Save'  }}\"></nxt-button>\n                </div>\n                <nxt-pagination *ngIf=\"isPagination\" [pageSizeOptions]=\"pageSizeOptions\"\n                    [collectionSize]=\"configPagination ? totalRecords || totalCount : filterTableNos\"\n                    [pageSize]=\"pageSize\" [currentPage]=\"pageIndex\" [firstLastButtons]=\"true\"\n                    (event)=\"pageParams($event)\">\n                </nxt-pagination>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS15FEB25 alert on deleting record -->\n<div *ngIf=\"deleteModal\" class=\"modal modal-backdrop show  d-block\" id=\"deleteRecord\" tabindex=\"-1\"\n    aria-labelledby=\"deleteRecordLabel\" [attr.aria-hidden]=\"!deleteModal\">\n    <div class=\"modal-dialog\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">\n                <b class=\"modal-title fs-5\" id=\"deleteRecordLabel\">{{ 'DELETE_RECORD'| nxtCustomTranslate : 'Delete Record'}}</b>\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteModal = false\"></button>\n            </div>\n            <div class=\"modal-body\">\n                {{ 'ARE_YOU_SURE_YOU_WANT_TO_DELETE_THE_REC'| nxtCustomTranslate : 'Are you sure you want to delete the record'}} ?\n            </div>\n            <div class=\"modal-footer\">\n                <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\" (click)=\"deleteModal = false\">{{\n                    'NO'| nxtCustomTranslate : 'No'}}</button>\n                <button type=\"button\" class=\"btn btn-primary\" data-bs-dismiss=\"modal\" aria-label=\"Close\"\n                    (click)=\"deleteRecordData()\">{{ 'YES'| nxtCustomTranslate : 'Yes'}}</button>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".custom-table{display:table;width:100%;border-collapse:collapse;table-layout:fixed;direction:var(--direction);background:var(--body-bg)}.table-header{display:table-header-group;position:sticky;top:0;z-index:100;box-shadow:none;transition:box-shadow .3s ease-in-out;background:var(--header-bg)}.shadow{box-shadow:0 4px 5px #0001!important}.table-body{display:table-row-group}.table-row{display:table-row;min-height:40px}.table-cell{position:relative;min-width:50px;padding:12px 0 12px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-col-cell{position:relative;min-width:50px;padding:10px 0 10px 12px;border-bottom:solid 1px var(--border-color);max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;text-overflow:ellipsis;display:table-cell}.table-container.resizing{-webkit-user-select:none;user-select:none;pointer-events:none}.table-container.resizing .resize-handle{pointer-events:auto}.sticky-column{position:sticky;background:inherit;z-index:5}.sticky-column .resize-handle{z-index:15}.actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;right:0;background:var(--header-bg)}.actionCol{min-width:100px!important;width:100px!important;max-width:100px!important}.actionCol .resize-handle{display:none}.table-container{width:100%;overflow-x:auto;overflow-y:auto;border-top:1px solid #e0e0e0;scrollbar-width:none}.table-container::-webkit-scrollbar{display:none}.column-header{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden;padding-right:8px}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0}.column-header img{cursor:pointer}.shadow-hidden{position:relative}.shadow-hidden:before{content:\"\";position:absolute;z-index:11;top:-10px;left:0;width:100%;height:10px;background:linear-gradient(to top,var(--scroll-shadow),transparent)}.resize-handle{position:absolute;right:-1px;top:0;bottom:0;width:1px;cursor:col-resize;background:#ccc;z-index:10;transition:background-color .2s ease}.resize-handle:hover{background:#ccc;opacity:.7}.resize-handle:active{background:#ccc;opacity:.9}.columnDiv{position:relative;display:flex;align-items:center;width:100%;height:100%}.search{display:flex;justify-content:space-between;border:1px solid rgba(67,69,85,.3);border-radius:7px;align-self:center;padding:3px}.search-bar{width:100%;margin:5px}.configSearch{height:22px;padding:3px;margin:10p;background-color:#247dff;border-radius:4px}input::placeholder{color:#abafb1}.sort-indicators{display:inline-block;width:10px;padding-left:5px}.sort-direction{font-size:12px;color:var(--text-color);opacity:.7}.tableHeader{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .3s}.tableHeader:hover{background-color:var(--hover-bg)}.search-component{top:163%;left:0;z-index:-10;background-color:#fff;box-shadow:0 2px 10px #0000001a}[dir=rtl] .search-component{left:unset!important}input{border:none}.card{background:#fff;box-shadow:0 2px #0a0a0a1f;border-radius:8px;border-color:#e9e9e9}.fsearch{width:100%;justify-content:space-between;font-weight:400;font-size:13px;display:flex;background:#f0f5ff;border-radius:6px;align-self:center}.content{margin:6px;width:150px}.fsearch-bar{display:flex;flex-direction:row;width:100%;margin:5px;transition:width .3s ease}.search.resized{width:calc(100% - 40px)}.filter-content{width:100%;max-height:150px;padding-left:5px}.label-data{font-weight:200;font-size:12px;color:#434555d9}input[type=checkbox]{height:16px;width:16px;border-radius:5px;margin-left:2px}input[type=checkbox]:after{width:4px;height:7px;left:5px;top:3px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:checked{--r: 43deg}.checkbox-cont{display:flex;align-items:center}.searchinput{border:none;background-color:#f0f5ff;width:85%;font-size:12px;color:#275efe;font-weight:600}.searchSvg{margin-right:3px}.close-icon{margin-left:4px;width:36px;height:32px;cursor:pointer;padding-top:9px;padding-bottom:9px;background-color:#ffefee;color:red;border-radius:4px;transition:background-color .3s ease,color .3s ease}.close-icon:hover{background-color:red;color:#fff}.checkboxdiv{display:flex;align-items:center}.checkboxdiv input{flex-shrink:0}input:focus,input:active,select:focus,select:active,textarea:focus,textarea:active,button:focus,button:active{outline:none!important}@supports (-webkit-appearance: none) or (-moz-appearance: none){input[type=checkbox]{--active: #275EFE;--active-inner: #fff;--focus: 2px rgba(39, 94, 254, .3);--border: #BBC1E1;--border-hover: #275EFE;--background: #fff;--disabled: #F6F8FF;--disabled-inner: #E1E6F9;-webkit-appearance:none;-moz-appearance:none;height:21px;outline:none;display:inline-block;vertical-align:top;position:relative;margin:0;cursor:pointer;border:1px solid var(--bc, var(--border));background:var(--b, var(--background))!important;transition:background .3s,border-color .3s,box-shadow .2s}input[type=checkbox]:after{content:\"\";display:block;left:0;top:0;position:absolute;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}input[type=checkbox]:checked{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:disabled{--b: var(--disabled);cursor:not-allowed;opacity:.9}input[type=checkbox]:disabled:checked{--b: var(--disabled-inner);--bc: var(--border)}input[type=checkbox]:disabled+label{cursor:not-allowed}input[type=checkbox]:hover:not(:checked):not(:disabled){--bc: var(--border-hover)}input[type=checkbox]:focus{box-shadow:0 0 0 var(--focus)}input[type=checkbox]:not(.switch){width:21px}input[type=checkbox]:not(.switch):after{opacity:var(--o, 0)}input[type=checkbox]:not(.switch):checked{--o: 1}input[type=checkbox]+label{font-size:14px;line-height:21px;display:inline-block;vertical-align:top;cursor:pointer;margin-left:4px}input[type=checkbox]:not(.switch){border-radius:7px}input[type=checkbox]:not(.switch):after{width:5px;height:9px;border:2px solid var(--active-inner);border-top:0;border-left:0;left:7px;top:4px;transform:rotate(var(--r, 20deg))}input[type=checkbox]:not(.switch):checked{--r: 43deg}input[type=checkbox].switch{width:38px;border-radius:11px}input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--ab, var(--border));transform:translate(var(--x, 0))}input[type=checkbox].switch:checked{--ab: var(--active-inner);--x: 17px}input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6}input[type=checkbox]:indeterminate{--b: var(--active);--bc: var(--active);--d-o: .3s;--d-t: .6s;--d-t-e: cubic-bezier(.2, .85, .32, 1.2)}input[type=checkbox]:indeterminate:after{content:\"\";display:block;left:8px;top:5px;rotate:69deg;position:absolute;width:2px;height:9px;background:var(--active-inner);opacity:6;transition:transform var(--d-t, .3s) var(--d-t-e, ease),opacity var(--d-o, .2s)}}:host{--primary-color: #275EFE;--secondary-color: #6C757D;--text-color: #434555;--border-color: #e0e0e0;--hover-bg: #f9f9f9;--header-bg: #ffffff;--body-bg: #ffffff;--danger-color: #FF2C10;--scroll-shadow: rgba(0, 0, 0, .08);--box-shadow: 0 2px 10px rgba(0, 0, 0, .1)}:host(.dark-theme){--primary-color: #6c8dfa;--text-color: #ffffff;--header-bg: #2c2c2c;--body-bg: #1e1e1e;--border-color: #404040;--hover-bg: #373737}.hyper-link:hover{color:#00f!important;text-decoration:underline;cursor:pointer}.on-edit:hover .edit-icon{visibility:visible}.nxt-lop-input{border-radius:5px;color:#2c3137;font-weight:400;font-size:13px;transition:all .2s}.input-box{border:solid}.inlineAdd{align-items:center;gap:10px;padding-top:10px}.addIconBor{padding:4px;border-radius:5px;border:1px solid #6c757d;transition:background-color .3s,border-color .3s}.addIcon{padding:1px;border-radius:5px;background-color:#ddd;transition:background-color .3s}.addIconBor:hover .addIcon{background-color:#bbd3ff}::ng-deep .modal-backdrop{background-color:#000000b3!important}::ng-deep .modal-backdrop.show{opacity:1!important}.eicon-container:hover .edit-icon svg path{fill:#2163ff!important}.eicon-container:hover .edit-icon{background-color:#c9d2ff!important;cursor:pointer}.eicon-container:hover{border:1px solid #2163ff!important}.dicon-container:hover .delete-icon svg path{stroke:#fff!important;fill:transparent!important}.dicon-container:hover .delete-icon{background-color:#ff7575!important;cursor:pointer}.dicon-container:hover{border:1px solid #ff2121!important}.clickable-img{position:relative;cursor:pointer;padding:2px;border:1px solid #dddddd;border-radius:5px}.clickable-img:hover{border:1px solid rgb(31,105,255);border-radius:5px}.clickable-img:hover div svg{background-color:#ecf3ff!important}.clickable-img:hover div{background-color:#ecf3ff!important}.dropdown-menu{left:unset!important;right:300%;top:12.5px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}[dir=rtl] .search{margin-left:7px}[dir=rtl] .noOfRec{gap:4px}[dir=rtl] .sticky-column{position:sticky;right:0;z-index:11;background:var(--header-bg)}[dir=rtl] .actionCol{position:sticky;padding:unset!important;align-items:center;z-index:11;left:0;background:var(--header-bg)}[dir=rtl] .resize-handle{position:relative;left:0!important;right:14px;width:1.5px;background-color:#dddd}[dir=rtl] .sort-indicators{padding-right:5px}::ng-deep [dir=rtl] nxt-pagination .dropdown-arrow{left:5px;right:unset!important}::ng-deep [dir=rtl] nxt-button .dropdown-menu{right:unset!important;left:0!important}[dir=rtl] .dropdown-menu{left:300%!important;right:unset!important}[dir=rtl] .fc-btn-text{padding-right:10px}.selected-cell{border-left:2px solid #2196F3!important;border-right:2px solid #2196F3!important;position:relative;z-index:1}.selected-column{position:relative;border:2px solid #2196F3!important;border-bottom:none!important;border-radius:4px}.close-column-btn{position:absolute;top:3px;right:5px;width:12px;height:12px;border:solid black .5px;color:#000;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;cursor:pointer;z-index:2}.close-column-btn:hover{background:#f32121!important;border:solid #f32121 .5px!important;color:#fff!important}.table-row:last-child .selected-cell{border-bottom:2px solid #2196F3!important}.hover-content{position:absolute;z-index:1;background:#fff;border:1px solid #ccc;box-shadow:0 2px 5px #00000026;padding:10px;min-width:200px;border-radius:5px;top:70%;left:0;cursor:pointer}.expense-file{text-decoration:none;transition:text-decoration .2s ease-in-out;cursor:pointer}.expense-file:hover{text-decoration:underline;color:#0056b3;cursor:pointer}.popover-container .hover-content{display:none;position:absolute;cursor:pointer}.popover-container:hover .hover-content{display:block;cursor:pointer}.summary-row{font-weight:700}.non-summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px white!important}.summary-table-cell{display:table-cell;padding:12px;text-overflow:ellipsis;white-space:nowrap;position:relative;color:var(--text-color);border:solid 1px var(--border-color)!important;border-top:solid 1.5px var(--border-color)!important}.horizontal-summary-table-cell{display:table-cell;max-width:none;box-sizing:border-box;overflow:visible;white-space:nowrap;padding:12px;text-overflow:ellipsis;position:relative;color:var(--text-color);border:solid 1px white!important;border-top:solid 1px var(--border-color)!important;border-bottom:1px solid var(--border-color)!important}.last-cell{border-right:1px solid var(--border-color)!important}.table-last-cell{border-bottom:1px solid var(--border-color)!important}.skeleton-loader{display:table;width:100%;border-collapse:collapse}.skeleton-row{display:table-row;border-bottom:1px solid var(--border-color)}.skeleton-cell{display:table-cell;padding:12px;height:35px;background:#fff;position:relative}.skeleton-cell:before{content:\"\";position:absolute;inset:3px;background:linear-gradient(90deg,#f5f5f5 25%,#eaeaea,#f5f5f5 75%);background-size:200% 100%;animation:pulse 1.5s infinite linear;border-radius:4px}.skeleton-cell.sticky-column{position:sticky;left:0;z-index:11;background:#f5f5f5}.skeleton-cell.actionCol.sticky-column{position:sticky;right:0;left:auto;background:#f5f5f5}@keyframes pulse{0%{background-position:200% 0}to{background-position:-200% 0}}.form-builder-table-box{height:108px;display:flex;justify-content:center;align-items:center;border:1px dashed #a8a1a1}.no-data{display:flex;align-items:anchor-center;height:60px;justify-content:center}.custom-line{width:100%;border:1px solid #000}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: TranslationService }, { type: i0.Renderer2 }, { type: DataService }, { type: ChangeService }], propDecorators: { data: [{
                 type: Input
             }], tableFilterData: [{
@@ -58997,6 +58997,7 @@ class QuestionbookComponent {
     themeColor; //MSM10JUL25 icon selector component input
     cdnIconURL = ''; //MSM10JUL25 icon selector component input
     direction = 'ltr';
+    languageCode = 'en';
     //@ViewChild(ComponenthostDirective, { static: true }) dynamicHost: ComponenthostDirective;
     subQuestions;
     selectedFileData = [];
@@ -59680,14 +59681,14 @@ class QuestionbookComponent {
         this.isImageEdit = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuestionbookComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: ChangeService }, { token: StorageService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: QuestionbookComponent, isStandalone: true, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", isEdit: "isEdit", dropDownData: "dropDownData", dataBind: "dataBind", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", direction: "direction" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <!-- RA09DEC24 Changed keys-->\n        <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n            [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n            <!-- VD 09May24 is hide field change-->\n            <div *ngIf=\"!ques.isHidden\" class=\"nxtInputContainer\">\n                <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n                <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n                    *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n                    [style]=\"ques.style?.labelStyle\">\n                    <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\"\n                        [ngStyle]=\"{\n                        'font-family': ques.font,\n                        'color': ques.fontColor,\n                        'font-size': ques.fontSize,\n                        'font-weight': ques.fontWeight\n                      }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n                        <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n                        <!-- SKS13MAR25 only show on file type -->\n                        <!-- RS 17JAN2025 -->\n                        <!-- Displays icons with tooltips help text -->\n                        <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n                            [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n                        <!-- RS 17JAN2025 -->\n                        <!--  Displays icons with tooltips for file requirements -->\n                        <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n                            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n                            style=\"margin-left: 4px;\">i</div>\n                    </span>\n                </div>\n                <!-- calendar  -->\n                <div *ngIf=\"ques.type === 'Calendar'\">\n                    <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                    <!-- model used in calendar component -->\n                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                    </app-custom-model>\n                </div>\n\n                <!-- SKS11JUN25 for pick location -->\n                <app-pick-location  *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n\n                <!-- SKS25MAR25 Image -->\n                <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                    (mouseleave)=\"isImageHover = false;\">\n                    <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                fill=\"#6C757D\" />\n                        </svg>\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                                d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                                d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                    <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n                    <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n                        <!-- Logo preview area -->\n                        <div class=\"logo-preview\" *ngIf=\"ques.input\">\n                            <img [src]=\"ques.imageData\" />\n                        </div>\n\n                        <!-- Upload button -->\n                        <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>Upload Image</span>\n                            </label>\n                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n                        </div>\n                    </div>\n                </div>\n                <!-- MSM10JUL25 icon-selector -->\n                <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n                    [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n                <!-- SKS21MAR25 line -->\n                <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                <!-- SKS13MAR25 data table -->\n                <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n                </nxt-datatable>\n                <!-- list -->\n                <nxt-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" \n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n                </nxt-search-box>\n\n                <!-- Dropdown -->\n                <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n                <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                    placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                </app-custom-dropdown>\n                <!-- // VD 02Aug24 custom-radio component -->\n                <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n                    <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                        [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                        [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                    </app-custom-radio>\n                </div>\n\n                <!-- Attachment / Files -->\n                <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n                    (deletedFileData)=\"deleteFile($event)\"\n                    ></app-file-upload>\n                <!-- SKS11JUN25 Button -->\n                <nxt-button\n                    *ngIf=\"ques.type === 'Button'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n                    (buttonClickEmit)=\"childEventCapture($event, ques)\"\n                    >\n                </nxt-button>\n                <!-- SKS11JUN25 book type -->\n                <lib-questionbook *ngIf=\"ques.type === 'Book'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n                    [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n                    (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n                <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n                    [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' :  ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [value]=\"ques.input\"\n                    [question]=\"ques\"\n                    [labelFont]=\"ques.font\"\n                    [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\"\n                    [inputValueSize]=\"ques.fontSize\"\n                    [labelWeight]=\"ques.fontWeight\"\n                    [inputWeight]=\"ques.fontWeight\"\n                    [showLabel]=\"ques.style?.showLabel\"\n                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n                    [inputId]=\"ques.trackingId\"\n                    [errorMessages]=\"{ required: 'This field is required' }\"\n                    [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n                    [minDate]=\"ques.minDate\"\n                    [rows]=\"3\"\n                    (inputValue)=\"childEventCapture($event.value,$event.question)\"\n                    >\n                </nxt-input>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n    <div class=\"modal-content\">\n        <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n        <!-- Image Editor -->\n        <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n            <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n                [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n                imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n                [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n                [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n                [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n                [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n                [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n                [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n                (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n            </image-cropper>\n\n            <!-- Controls -->\n            <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n                    title=\"Flip Horizontally\">\u2194</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n                    title=\"Flip Vertically\">\u2195</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind", "allIcons", "themeColor", "cdnIconURL", "direction"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: QuestionbookComponent, isStandalone: true, selector: "lib-questionbook", inputs: { qbItem: "qbItem", questionItem: "questionItem", questions: "questions", errorFieldId: "errorFieldId", labelValue: "labelValue", token: "token", isEdit: "isEdit", dropDownData: "dropDownData", dataBind: "dataBind", allIcons: "allIcons", themeColor: "themeColor", cdnIconURL: "cdnIconURL", direction: "direction", languageCode: "languageCode" }, outputs: { handleDropDown: "handleDropDown", handleQuestion: "handleQuestion", singleFieldChangeEmit: "singleFieldChangeEmit", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, ngImport: i0, template: "<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <!-- RA09DEC24 Changed keys-->\n        <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n            [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n            <!-- VD 09May24 is hide field change-->\n            <div *ngIf=\"!ques.isHidden\" class=\"nxtInputContainer\">\n                <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n                <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n                    *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n                    [style]=\"ques.style?.labelStyle\">\n                    <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\"\n                        [ngStyle]=\"{\n                        'font-family': ques.font,\n                        'color': ques.fontColor,\n                        'font-size': ques.fontSize,\n                        'font-weight': ques.fontWeight\n                      }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n                        <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n                        <!-- SKS13MAR25 only show on file type -->\n                        <!-- RS 17JAN2025 -->\n                        <!-- Displays icons with tooltips help text -->\n                        <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n                            [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n                        <!-- RS 17JAN2025 -->\n                        <!--  Displays icons with tooltips for file requirements -->\n                        <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n                            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n                            style=\"margin-left: 4px;\">i</div>\n                    </span>\n                </div>\n                <!-- calendar  -->\n                <div *ngIf=\"ques.type === 'Calendar'\">\n                    <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                    <!-- model used in calendar component -->\n                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                    </app-custom-model>\n                </div>\n\n                <!-- SKS11JUN25 for pick location -->\n                <app-pick-location  *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n\n                <!-- SKS25MAR25 Image -->\n                <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                    (mouseleave)=\"isImageHover = false;\">\n                    <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                fill=\"#6C757D\" />\n                        </svg>\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                                d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                                d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                    <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n                    <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n                        <!-- Logo preview area -->\n                        <div class=\"logo-preview\" *ngIf=\"ques.input\">\n                            <img [src]=\"ques.imageData\" />\n                        </div>\n\n                        <!-- Upload button -->\n                        <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>Upload Image</span>\n                            </label>\n                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n                        </div>\n                    </div>\n                </div>\n                <!-- MSM10JUL25 icon-selector -->\n                <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n                    [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n                <!-- SKS21MAR25 line -->\n                <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                <!-- SKS13MAR25 data table -->\n                <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\" [languageCode]=\"languageCode\"\n                    [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n                </nxt-datatable>\n                <!-- list -->\n                <nxt-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" \n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n                </nxt-search-box>\n\n                <!-- Dropdown -->\n                <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n                <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                    placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                </app-custom-dropdown>\n                <!-- // VD 02Aug24 custom-radio component -->\n                <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n                    <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                        [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                        [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                    </app-custom-radio>\n                </div>\n\n                <!-- Attachment / Files -->\n                <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n                    (deletedFileData)=\"deleteFile($event)\"\n                    ></app-file-upload>\n                <!-- SKS11JUN25 Button -->\n                <nxt-button\n                    *ngIf=\"ques.type === 'Button'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n                    (buttonClickEmit)=\"childEventCapture($event, ques)\"\n                    >\n                </nxt-button>\n                <!-- SKS11JUN25 book type -->\n                <lib-questionbook *ngIf=\"ques.type === 'Book'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n                    [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n                    (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n                <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n                    [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' :  ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [value]=\"ques.input\"\n                    [question]=\"ques\"\n                    [labelFont]=\"ques.font\"\n                    [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\"\n                    [inputValueSize]=\"ques.fontSize\"\n                    [labelWeight]=\"ques.fontWeight\"\n                    [inputWeight]=\"ques.fontWeight\"\n                    [showLabel]=\"ques.style?.showLabel\"\n                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n                    [inputId]=\"ques.trackingId\"\n                    [errorMessages]=\"{ required: 'This field is required' }\"\n                    [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n                    [minDate]=\"ques.minDate\"\n                    [rows]=\"3\"\n                    (inputValue)=\"childEventCapture($event.value,$event.question)\"\n                    >\n                </nxt-input>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n    <div class=\"modal-content\">\n        <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n        <!-- Image Editor -->\n        <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n            <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n                [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n                imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n                [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n                [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n                [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n                [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n                [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n                [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n                (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n            </image-cropper>\n\n            <!-- Controls -->\n            <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n                    title=\"Flip Horizontally\">\u2194</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n                    title=\"Flip Vertically\">\u2195</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"], dependencies: [{ kind: "component", type: QuestionbookComponent, selector: "lib-questionbook", inputs: ["qbItem", "questionItem", "questions", "errorFieldId", "labelValue", "token", "isEdit", "dropDownData", "dataBind", "allIcons", "themeColor", "cdnIconURL", "direction", "languageCode"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: NxtFileUploadComponent, selector: "app-file-upload", inputs: ["allFiles", "limitFileUploading", "mode", "isShowNoFileIcon", "question", "error", "from"], outputs: ["selectedFileData", "deletedFileData"] }, { kind: "component", type: CustomRadioComponent, selector: "app-custom-radio", inputs: ["options", "question", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "referenceField", "token", "mode"], outputs: ["valueChange"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "component", type: NxtButtonComponent, selector: "nxt-button", inputs: ["buttonValue", "buttonType", "type", "buttonDisable", "btnBgColor", "btnBorder", "btnTextColor", "btnHeight", "btnWidth", "btnIconLeftSrc", "btnIconRightSrc", "btnHoverBgColor", "btnHoverTextColor", "btnId", "dataDismiss", "buttonBorder", "modalToTrigger", "isImageSvg", "tabIndex", "buttonConfig", "mode", "languageCode"], outputs: ["buttonClickEmit"] }, { kind: "component", type: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "from"], outputs: ["searchValueChange"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: PickLocationComponent, selector: "app-pick-location", inputs: ["address", "from", "question", "mode", "apiKey"], outputs: ["locationSelected"] }, { kind: "component", type: CustomModelComponent, selector: "app-custom-model", inputs: ["modalTitle", "isModalOpen", "modalSize", "saveButtonValue", "modalFooter"], outputs: ["saveButtonEmit", "cancelButtonEmit"] }, { kind: "component", type: CustomCalendarComponent, selector: "app-custom-calendar", inputs: ["allEvents", "question", "nxtId"], outputs: ["eventSelected", "dateSelected", "openModal", "closeModal"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "component", type: IconSelectorComponent, selector: "nxt-icon-selector", inputs: ["allIcons", "themeColor", "height", "tooltipPosition", "selectedIcon", "cdnIconURL", "label", "labelFont", "labelWeight", "inputWeight", "labelSize", "labelColor", "showLabel", "required", "mode", "question", "options"], outputs: ["iconSelected"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: QuestionbookComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-questionbook', standalone: true, imports: [
                         CommonModule,
                         FormsModule, ImageCropperComponent, NxtFileUploadComponent, CustomRadioComponent, CustomDropdownComponent, NxtButtonComponent, NxtSearchBox, NxtDatatable, PickLocationComponent, CustomModelComponent, CustomCalendarComponent, MatTooltipModule, NxtInput, IconSelectorComponent, NxtCustomTranslatePipe
-                    ], template: "<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <!-- RA09DEC24 Changed keys-->\n        <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n            [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n            <!-- VD 09May24 is hide field change-->\n            <div *ngIf=\"!ques.isHidden\" class=\"nxtInputContainer\">\n                <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n                <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n                    *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n                    [style]=\"ques.style?.labelStyle\">\n                    <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\"\n                        [ngStyle]=\"{\n                        'font-family': ques.font,\n                        'color': ques.fontColor,\n                        'font-size': ques.fontSize,\n                        'font-weight': ques.fontWeight\n                      }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n                        <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n                        <!-- SKS13MAR25 only show on file type -->\n                        <!-- RS 17JAN2025 -->\n                        <!-- Displays icons with tooltips help text -->\n                        <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n                            [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n                        <!-- RS 17JAN2025 -->\n                        <!--  Displays icons with tooltips for file requirements -->\n                        <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n                            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n                            style=\"margin-left: 4px;\">i</div>\n                    </span>\n                </div>\n                <!-- calendar  -->\n                <div *ngIf=\"ques.type === 'Calendar'\">\n                    <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                    <!-- model used in calendar component -->\n                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                    </app-custom-model>\n                </div>\n\n                <!-- SKS11JUN25 for pick location -->\n                <app-pick-location  *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n\n                <!-- SKS25MAR25 Image -->\n                <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                    (mouseleave)=\"isImageHover = false;\">\n                    <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                fill=\"#6C757D\" />\n                        </svg>\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                                d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                                d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                    <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n                    <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n                        <!-- Logo preview area -->\n                        <div class=\"logo-preview\" *ngIf=\"ques.input\">\n                            <img [src]=\"ques.imageData\" />\n                        </div>\n\n                        <!-- Upload button -->\n                        <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>Upload Image</span>\n                            </label>\n                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n                        </div>\n                    </div>\n                </div>\n                <!-- MSM10JUL25 icon-selector -->\n                <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n                    [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n                <!-- SKS21MAR25 line -->\n                <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                <!-- SKS13MAR25 data table -->\n                <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n                </nxt-datatable>\n                <!-- list -->\n                <nxt-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" \n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n                </nxt-search-box>\n\n                <!-- Dropdown -->\n                <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n                <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                    placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                </app-custom-dropdown>\n                <!-- // VD 02Aug24 custom-radio component -->\n                <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n                    <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                        [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                        [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                    </app-custom-radio>\n                </div>\n\n                <!-- Attachment / Files -->\n                <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n                    (deletedFileData)=\"deleteFile($event)\"\n                    ></app-file-upload>\n                <!-- SKS11JUN25 Button -->\n                <nxt-button\n                    *ngIf=\"ques.type === 'Button'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n                    (buttonClickEmit)=\"childEventCapture($event, ques)\"\n                    >\n                </nxt-button>\n                <!-- SKS11JUN25 book type -->\n                <lib-questionbook *ngIf=\"ques.type === 'Book'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n                    [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n                    (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n                <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n                    [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' :  ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [value]=\"ques.input\"\n                    [question]=\"ques\"\n                    [labelFont]=\"ques.font\"\n                    [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\"\n                    [inputValueSize]=\"ques.fontSize\"\n                    [labelWeight]=\"ques.fontWeight\"\n                    [inputWeight]=\"ques.fontWeight\"\n                    [showLabel]=\"ques.style?.showLabel\"\n                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n                    [inputId]=\"ques.trackingId\"\n                    [errorMessages]=\"{ required: 'This field is required' }\"\n                    [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n                    [minDate]=\"ques.minDate\"\n                    [rows]=\"3\"\n                    (inputValue)=\"childEventCapture($event.value,$event.question)\"\n                    >\n                </nxt-input>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n    <div class=\"modal-content\">\n        <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n        <!-- Image Editor -->\n        <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n            <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n                [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n                imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n                [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n                [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n                [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n                [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n                [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n                [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n                (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n            </image-cropper>\n\n            <!-- Controls -->\n            <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n                    title=\"Flip Horizontally\">\u2194</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n                    title=\"Flip Vertically\">\u2195</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
+                    ], template: "<!-- HA 18JAN24  Added class for styling -->\n<div [style]=\"bookStyle\" class=\"content-box form-group\">\n    <div class=\"form-row\">\n        <!-- HA 20DEC23 Directive and Question Style from salesforce -->\n        <!-- RA09DEC24 Changed keys-->\n        <div [class]=\"'col-lg-' + ques.size + ' paddingnone'\" *ngFor=\"let ques of questions;let i = index\"\n            [id]=\"ques.id\" [style]=\"ques?.style?.questionStyle\">\n            <!-- VD 09May24 is hide field change-->\n            <div *ngIf=\"!ques.isHidden\" class=\"nxtInputContainer\">\n                <!-- AP-28MAR25 Show label if enabled and not a Boolean type -->\n                <div [ngClass]=\"{ down2: qbItem?.progressBar }\"\n                    *ngIf=\"ques.style?.showLabel ? (ques.style?.showLabel && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'RichTextArea' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&ques.type !== 'Email' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label'): (ques.style?.showLabel !== false && ques.type !== 'Boolean' && ques.type !== 'Text' && ques.type !== 'List' && ques?.type !== 'Dropdown' && ques.type !== 'DateTime' && ques.type !== 'Location' && ques.type !== 'Number' &&  ques.type !== 'Date' && ques.type !== 'Time' && ques.type !== 'TextArea' && ques.type !== 'Label')\"\n                    [style]=\"ques.style?.labelStyle\">\n                    <span [class]=\"'dis-flex shengel-myt-font3 myt-font7 '\" [style]=\"ques.style?.labelValueStyle\"\n                        [ngStyle]=\"{\n                        'font-family': ques.font,\n                        'color': ques.fontColor,\n                        'font-size': ques.fontSize,\n                        'font-weight': ques.fontWeight\n                      }\">{{ ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText):''}}\n                        <div *ngIf=\"ques.isOptional && !ques.isReadOnly\" style=\"color: red;\">*</div>\n                        <!-- SKS13MAR25 only show on file type -->\n                        <!-- RS 17JAN2025 -->\n                        <!-- Displays icons with tooltips help text -->\n                        <div *ngIf=\"ques.questionText && ques?.helpText && ques.type === 'File'\" class=\"icon\"\n                            [matTooltip]=\"ques?.helpText\" matTooltipClass=\"white-tooltip\">i</div>\n                        <!-- RS 17JAN2025 -->\n                        <!--  Displays icons with tooltips for file requirements -->\n                        <div class=\"icon\" *ngIf=\"ques.fieldsMeta && ques.type === 'File'\"\n                            [matTooltip]=\"getFileRequirements(ques.fieldsMeta)\" matTooltipClass=\"white-tooltip\"\n                            style=\"margin-left: 4px;\">i</div>\n                    </span>\n                </div>\n                <!-- calendar  -->\n                <div *ngIf=\"ques.type === 'Calendar'\">\n                    <app-custom-calendar [question]=\"ques\" (eventSelected)=\"getCalendarEvent($event)\"\n                        (dateSelected)=\"getCurrentCalendar($event)\" (openModal)=\"openCalendarModal($event)\"\n                        (closeModal)=\"closeCalendarModal($event)\"></app-custom-calendar>\n                    <!-- model used in calendar component -->\n                    <app-custom-model *ngIf=\"isCalendarModalOpen\" [modalTitle]=\"calendarModalTitle\"\n                        [isModalOpen]=\"isCalendarModalOpen\" [modalSize]=\"calendarModalSize\"\n                        [saveButtonValue]=\"calendarSaveButtonValue\" [modalFooter]=\"modalCalendarModalFooter\"\n                        (saveButtonEmit)=\"onCalendarModalSave()\" (cancelButtonEmit)=\"closeCalendarModal($event)\">\n                        <lib-questionbook [qbItem]=\"qbRefrenceBook\" [questions]=\"referenceQuestions\"\n                            (handleQuestion)=\"handleQuestionEvent($event)\"></lib-questionbook>\n                    </app-custom-model>\n                </div>\n\n                <!-- SKS11JUN25 for pick location -->\n                <app-pick-location  *ngIf=\"ques.type === 'Location'\" [apiKey]=\"qbItem['apiKey']\" [address]=\"ques.selectedValue\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (locationSelected)=\"childEventCapture($event, ques)\">\n                </app-pick-location>\n\n                <!-- SKS25MAR25 Image -->\n                <div *ngIf=\"ques.type === 'Image'\" (mouseenter)=\"isImageHover = true;\"\n                    (mouseleave)=\"isImageHover = false;\">\n                    <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageEdit(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                                fill=\"#6C757D\" />\n                        </svg>\n                        <svg *ngIf=\"!ques.isReadOnly\" (click)=\"onImageDelete(ques)\" width=\"16\" height=\"16\"\n                            viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                            <path\n                                d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                                d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path\n                                d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                                stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\"\n                                stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                            <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\" />\n                        </svg>\n                    </div>\n                    <img *ngIf=\"ques.isReadOnly\" [src]=\"ques.imageData\" />\n                    <div *ngIf=\"!ques.isReadOnly\" class=\"logo-container\">\n                        <!-- Logo preview area -->\n                        <div class=\"logo-preview\" *ngIf=\"ques.input\">\n                            <img [src]=\"ques.imageData\" />\n                        </div>\n\n                        <!-- Upload button -->\n                        <div *ngIf=\"!ques.imageData\" class=\"logo-upload-placeholder\">\n                            <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>Upload Image</span>\n                            </label>\n                            <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(ques, $event)\" style=\"display: none;\" />\n                        </div>\n                    </div>\n                </div>\n                <!-- MSM10JUL25 icon-selector -->\n                <nxt-icon-selector [allIcons]=\"allIcons\" *ngIf=\"ques.type === 'Icon'\" [required]=\"ques.isOptional\" [mode]=\"isEdit !== true ? 'view' : 'edit'\" [question]=\"ques\" [labelFont]=\"ques.font\"\n                    [label]=\" ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\" [labelWeight]=\"ques.fontWeight\" [showLabel]=\"ques.style?.showLabel\" (iconSelected)=\"childEventCapture($event, ques);\"></nxt-icon-selector>\n\n                <!-- SKS21MAR25 line -->\n                <hr *ngIf=\"ques.type === 'Line'\" class=\"custom-line\" style=\"display: inline-flex\" />\n                <!-- SKS13MAR25 data table -->\n                <nxt-datatable *ngIf=\"ques.type === 'Table'\" isEditRow isDeleteRow actionButton isButtons [question]=\"ques\" from=\"formBuilder\"\n                    (valueChange)=\"childEventCapture($event, ques); clearSQError(ques.id)\" [apiMeta]=\"ques.subText\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\" [languageCode]=\"languageCode\"\n                    [tableConfig]=\"ques.tableConfig\" tableId=\"\" [direction]=\"direction\" tableWidth=\"auto\">\n                </nxt-datatable>\n                <!-- list -->\n                <nxt-search-box  *ngIf=\"ques.type === 'List'\" [question]=\"ques\" [readOnly]=\"ques.isReadOnly\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [placeHolderText]=\"ques.question || ''\" \n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (searchValueChange)=\"childEventCapture($event.value,$event.question)\">\n                </nxt-search-box>\n\n                <!-- Dropdown -->\n                <!-- HA 09FEB24 Added condition of sqOption to the dropdown -->\n                <app-custom-dropdown *ngIf=\"ques?.type === 'Dropdown' && ques?.options\" [options]=\"ques.options\" [token]=\"token\" [apiMeta]=\"ques.subText\"\n                    [id]=\"ques.id\" [selectedValue]=\"qbItem.isShengel ? ques.input : ques.selectedValue\"\n                    placeholder=\"---{{'SELECT' | nxtCustomTranslate : 'select'}}---\"\n                    [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\" [referenceField]=\"ques.referenceField\"\n                    [readOnly]=\"ques.isReadOnly\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                </app-custom-dropdown>\n                <!-- // VD 02Aug24 custom-radio component -->\n                <div *ngIf=\"ques.type === 'Radio' && ques?.options\" class=\"\">\n                    <app-custom-radio [options]=\"ques.options\" [question]=\"ques\" [token]=\"token\" [apiMeta]=\"ques.subText\" [id]=\"ques.id\"\n                        [selectedValue]=\"ques.selectedValue\" [errorMessage]=\"ques.errorMessage\" [error]=\"ques.error\"\n                        [referenceField]=\"ques.referenceField\" [readOnly]=\"ques.isReadOnly\"\n                        [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                        (valueChange)=\"childEventCapture($event.value,$event.question); clearSQError(ques.id)\">\n                    </app-custom-radio>\n                </div>\n\n                <!-- Attachment / Files -->\n                <app-file-upload *ngIf=\"ques.type === 'File'\" [limitFileUploading]=\"5\" [error]=\"ques.error\" [question]=\"ques\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [allFiles]=\"ques.input\" (selectedFileData)=\"childEventCapture($event.value,$event.question)\"\n                    (deletedFileData)=\"deleteFile($event)\"\n                    ></app-file-upload>\n                <!-- SKS11JUN25 Button -->\n                <nxt-button\n                    *ngIf=\"ques.type === 'Button'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [btnHeight]=\"'50px'\" [btnWidth]=\"'150px'\" [buttonValue]=\"ques?.question\"\n                    (buttonClickEmit)=\"childEventCapture($event, ques)\"\n                    >\n                </nxt-button>\n                <!-- SKS11JUN25 book type -->\n                <lib-questionbook *ngIf=\"ques.type === 'Book'\" [qbItem]=\"ques.qbItem\" [labelValue]=\"labelValue\"\n                    [questions]=\"ques?.qbReferenceQuestions?.bookQuestionsMap?.[ques?.qbReference]?.subQuestions\"\n                    (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n                <!-- SKS11JUN25 Text, Email, label, number, Boolean, rich text editor, DateTime, Date, Time-->\n                <nxt-input  *ngIf=\"ques.type === 'Text' || ques.type === 'Email' || ques.type === 'Number' || ques.type === 'Label' || ques.type === 'Boolean' || ques.type === 'RichTextArea' || ques.type === 'DateTime' || ques.type === 'Date' || ques.type === 'Time' || ques.type === 'TextArea'\"\n                    [type]=\"ques.type === 'Text' ? 'text' : ques.type === 'Email' ? 'email' : ques.type === 'Number' ? 'number' : ques.type === 'Label' ? 'label' : ques.type === 'Boolean' ? 'checkbox' : ques.type === 'RichTextArea' ? 'richtext' : ques.type === 'DateTime' ? 'datetime' : ques.type === 'Date' ? 'date' :  ques.type === 'Time' ? 'time' : ques.type === 'TextArea' ? 'textarea' : 'text'\"\n                    [mode]=\"isEdit !== true ? 'view' : 'edit'\"\n                    [value]=\"ques.input\"\n                    [question]=\"ques\"\n                    [labelFont]=\"ques.font\"\n                    [label]=\"ques?.questionText ? ((ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText): ''\"\n                    [labelColor]=\"ques.fontColor\"\n                    [labelSize]=\"ques.fontSize\"\n                    [inputValueSize]=\"ques.fontSize\"\n                    [labelWeight]=\"ques.fontWeight\"\n                    [inputWeight]=\"ques.fontWeight\"\n                    [showLabel]=\"ques.style?.showLabel\"\n                    inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                    [placeholder]=\"ques?.question ? ((ques.id+'.question') | nxtCustomTranslate : ques?.question ): ''\"\n                    [required]=\"ques.isOptional\" inputBgColor=\"#FAFAFA\"\n                    [inputId]=\"ques.trackingId\"\n                    [errorMessages]=\"{ required: 'This field is required' }\"\n                    [inputIconLeftSrc]=\"ques.iconLeftSrc\" \n                    [minDate]=\"ques.minDate\"\n                    [rows]=\"3\"\n                    (inputValue)=\"childEventCapture($event.value,$event.question)\"\n                    >\n                </nxt-input>\n            </div>\n        </div>\n    </div>\n</div>\n\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n    <div class=\"modal-content\">\n        <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n\n        <!-- Image Editor -->\n        <div *ngIf=\"selectedImageElement?.type === 'Image'\">\n            <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n                [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n                imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n                [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n                [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n                [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n                [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n                [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n                [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n                (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n            </image-cropper>\n\n            <!-- Controls -->\n            <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n                    title=\"Flip Horizontally\">\u2194</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n                    title=\"Flip Vertically\">\u2195</div>\n                <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".col-lg-6{width:100%}.myt-font7{display:flex;justify-content:flex-start;align-items:center}.icon{display:inline-block;width:15px;height:15px;border-radius:50%;background-color:#08010177;color:#fff;text-align:center;line-height:16px;font-size:11px;font-family:Arial,sans-serif;font-weight:700;margin-left:5px}@media (min-width: 1200px){.col-lg-6{width:50%!important}.col-lg-6,.col-lg-4{padding-left:5px!important;padding-right:5px!important}.form-row{display:-ms-flexbox!important;display:flex!important;-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}}.icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background-color:#f5f5f5;border:1px solid #ddd;color:#666;margin-left:4px;font-size:12px;cursor:pointer!important}::ng-deep .mat-tooltip-panel{background:#fff!important}::ng-deep .mat-tooltip{background-color:#fff!important;color:#333!important;white-space:pre-line!important;line-height:1.5!important}.mat-tooltip{padding:8px 16px!important}::ng-deep .white-tooltip{white-space:pre-line!important;line-height:1.5!important}.nxtInputContainer div{padding-left:5px;padding-right:5px}.custom-line{width:100%;border:1px solid #000}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}input[type=checkbox]{width:21px}.boolean-question{display:flex;align-items:center;gap:10px;padding-top:14px;padding-bottom:12px}.form-control[disabled]{border-radius:5px;background-color:#e9ecef!important}\n"] }]
         }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: ChangeService }, { type: StorageService }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -59723,6 +59724,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], direction: [{
                 type: Input
+            }], languageCode: [{
+                type: Input
             }], hadleDropDownDependent: [{
                 type: Output
             }], handleCalendarDate: [{
@@ -60274,7 +60277,7 @@ class BookletComponent {
         this.isEdit = true;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BookletComponent, deps: [{ token: SalesforceService }, { token: DataService }, { token: StorageService }, { token: i1$1.DomSanitizer }, { token: ChangeService }, { token: i1.HttpClient }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, viewQueries: [{ propertyName: "questionbookComponent", first: true, predicate: ["questionbook"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\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 [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText  }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                 <!-- AP-19MAY25 - Added [isEdit] 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]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                (singleFieldChangeEmit) ='singleFieldChange($event)'\n                [dataBind]=\"dataBind\"\n                [isEdit]=\"isEdit\" \n                [allIcons]=\"allIcons\"\n                [themeColor]=\"themeColor\"\n                [cdnIconURL]=\"cdnIconURL\"\n                ></lib-questionbook>\n            </div>\n        </div>\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 [innerHTML]=\"getText(qb?.questionText)\" *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 [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- Group Actions -->\n    <!-- HA 19DEC23 For Direction -->\n    <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n    <div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n        <ng-container  *ngFor=\"let action of actions; let i = index\">\n            <div class=\"action-wrapper\"\n                [style.width.px]=\"action.width || 100\"\n                style=\"margin-right: 10px;\">  <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\"  removed in this tag -->\n                @if(!isEdit && action.name === 'Save'){\n                    <button \n                        (click)=\"editChangeClick(action)\" \n                        class=\"btn btn-primary fc-button nxtButton action-btn\"\n                        [style.--btn-bg]=\"action.bgColor\"\n                        [style.background-color]=\"action.bgColor || ''\"\n                        [style.color]=\"action.textColor || ''\"\n                        [style.border-radius.px]=\"action.borderRadius || 4\"\n                        style=\"width: 100%;\">\n                        {{ 'EDIT' | nxtCustomTranslate : 'Edit'}}\n                    </button>\n                }\n                @else {\n                    <button \n                        (click)=\"handleBookletActionClick(action)\" \n                        class=\"btn btn-primary fc-button nxtButton action-btn\"\n                        [style.--btn-bg]=\"action.bgColor\"\n                        [style.background-color]=\"action.bgColor || ''\"\n                        [style.color]=\"action.textColor || ''\"\n                        [style.border-radius.px]=\"action.borderRadius || 4\"\n                        style=\"width: 100%;\">\n                        {{ (action.id+'.name') | nxtCustomTranslate : action?.name}}\n                    </button>\n                }\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".align-submit-row{display:flex}.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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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", dataBind: "dataBind" }, outputs: { handleBookletActionEvent: "handleBookletActionEvent", handlePage: "handlePage", hadleDropDownDependent: "hadleDropDownDependent", handleCalendarDate: "handleCalendarDate", handleCalendarEvent: "handleCalendarEvent" }, viewQueries: [{ propertyName: "questionbookComponent", first: true, predicate: ["questionbook"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\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 [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText  }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                 <!-- AP-19MAY25 - Added [isEdit] 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]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                (singleFieldChangeEmit) ='singleFieldChange($event)'\n                [dataBind]=\"dataBind\"\n                [isEdit]=\"isEdit\" \n                [allIcons]=\"allIcons\"\n                [themeColor]=\"themeColor\"\n                [cdnIconURL]=\"cdnIconURL\"\n                [languageCode]=\"languageCode\"\n                ></lib-questionbook>\n            </div>\n        </div>\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 [innerHTML]=\"getText(qb?.questionText)\" *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 [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\" [languageCode]=\"languageCode\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- Group Actions -->\n    <!-- HA 19DEC23 For Direction -->\n    <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n    <div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n        <ng-container  *ngFor=\"let action of actions; let i = index\">\n            <div class=\"action-wrapper\"\n                [style.width.px]=\"action.width || 100\"\n                style=\"margin-right: 10px;\">  <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\"  removed in this tag -->\n                @if(!isEdit && action.name === 'Save'){\n                    <button \n                        (click)=\"editChangeClick(action)\" \n                        class=\"btn btn-primary fc-button nxtButton action-btn\"\n                        [style.--btn-bg]=\"action.bgColor\"\n                        [style.background-color]=\"action.bgColor || ''\"\n                        [style.color]=\"action.textColor || ''\"\n                        [style.border-radius.px]=\"action.borderRadius || 4\"\n                        style=\"width: 100%;\">\n                        {{ 'EDIT' | nxtCustomTranslate : 'Edit'}}\n                    </button>\n                }\n                @else {\n                    <button \n                        (click)=\"handleBookletActionClick(action)\" \n                        class=\"btn btn-primary fc-button nxtButton action-btn\"\n                        [style.--btn-bg]=\"action.bgColor\"\n                        [style.background-color]=\"action.bgColor || ''\"\n                        [style.color]=\"action.textColor || ''\"\n                        [style.border-radius.px]=\"action.borderRadius || 4\"\n                        style=\"width: 100%;\">\n                        {{ (action.id+'.name') | nxtCustomTranslate : action?.name}}\n                    </button>\n                }\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".align-submit-row{display:flex}.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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"], outputs: ["handleDropDown", "handleQuestion", "singleFieldChangeEmit", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BookletComponent, decorators: [{
             type: Component,
@@ -60283,7 +60286,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         FormsModule,
                         QuestionbookComponent,
                         NxtCustomTranslatePipe
-                    ], template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\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 [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText  }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                 <!-- AP-19MAY25 - Added [isEdit] 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]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                (singleFieldChangeEmit) ='singleFieldChange($event)'\n                [dataBind]=\"dataBind\"\n                [isEdit]=\"isEdit\" \n                [allIcons]=\"allIcons\"\n                [themeColor]=\"themeColor\"\n                [cdnIconURL]=\"cdnIconURL\"\n                ></lib-questionbook>\n            </div>\n        </div>\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 [innerHTML]=\"getText(qb?.questionText)\" *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 [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- Group Actions -->\n    <!-- HA 19DEC23 For Direction -->\n    <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n    <div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n        <ng-container  *ngFor=\"let action of actions; let i = index\">\n            <div class=\"action-wrapper\"\n                [style.width.px]=\"action.width || 100\"\n                style=\"margin-right: 10px;\">  <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\"  removed in this tag -->\n                @if(!isEdit && action.name === 'Save'){\n                    <button \n                        (click)=\"editChangeClick(action)\" \n                        class=\"btn btn-primary fc-button nxtButton action-btn\"\n                        [style.--btn-bg]=\"action.bgColor\"\n                        [style.background-color]=\"action.bgColor || ''\"\n                        [style.color]=\"action.textColor || ''\"\n                        [style.border-radius.px]=\"action.borderRadius || 4\"\n                        style=\"width: 100%;\">\n                        {{ 'EDIT' | nxtCustomTranslate : 'Edit'}}\n                    </button>\n                }\n                @else {\n                    <button \n                        (click)=\"handleBookletActionClick(action)\" \n                        class=\"btn btn-primary fc-button nxtButton action-btn\"\n                        [style.--btn-bg]=\"action.bgColor\"\n                        [style.background-color]=\"action.bgColor || ''\"\n                        [style.color]=\"action.textColor || ''\"\n                        [style.border-radius.px]=\"action.borderRadius || 4\"\n                        style=\"width: 100%;\">\n                        {{ (action.id+'.name') | nxtCustomTranslate : action?.name}}\n                    </button>\n                }\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".align-submit-row{display:flex}.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"] }]
+                    ], template: "<!-- Booklet Handling-->\n<!-- HA 19DEC23 For Direction -->\n<div *ngFor=\"let qb of booklet\" [dir]=\"direction\">\n    <!-- MR Commented below code to ensure single JSON for UNCONDITIONAL Booklets -->\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- <lib-questionnaire [serv]=\"serv\" [qbId]=\"qb.id\" [tkn]=\"tkn\"></lib-questionnaire> -->\n    <!-- HA 28DEC23 Below If logic is to load from booklet  -->\n    <div *ngIf=\"qb.subQuestions; else elseBlock\">\n        <div *ngFor=\"let ques of qb.subQuestions\" class=\"questiondiv1\">\n            <div>\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 [innerHTML]=\"getText(ques?.questionText)\" *ngIf=\"ques?.questionText && ques?.style?.showLabel !== false\" >\n                        {{ (ques.id+'.questionText') | nxtCustomTranslate : ques?.questionText  }}\n                    </div>\n                </div> <!-- VD 19JAN24 - getting token as input --> <!--VD 11Jun24 - translation changes-->\n                <!--VD 06Sep24 calendar changes-->\n                <!-- AP-14MAY25 - Added [dataBind] input binding -->\n                 <!-- AP-19MAY25 - Added [isEdit] 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]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"\n                (handleDropDown)=\"getDropDown($event)\"\n                (handleCalendarDate)=\"getCalendarDate($event)\"\n                (handleCalendarEvent)=\"getCalendarEvent($event)\"\n                (singleFieldChangeEmit) ='singleFieldChange($event)'\n                [dataBind]=\"dataBind\"\n                [isEdit]=\"isEdit\" \n                [allIcons]=\"allIcons\"\n                [themeColor]=\"themeColor\"\n                [cdnIconURL]=\"cdnIconURL\"\n                [languageCode]=\"languageCode\"\n                ></lib-questionbook>\n            </div>\n        </div>\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 [innerHTML]=\"getText(qb?.questionText)\" *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 [qbItem]=\"qb\" [token]=\"token\" [labelValue]=\"labelValue\" [questionItem]=\"qb\" [questions]=\"bookQuestionsMap?.get(qb.id)?.subQuestions\"  (handleDropDown)=\"getDropDown($event)\" [languageCode]=\"languageCode\"></lib-questionbook>\n            </div>\n        </div>\n    </ng-template>\n\n    <!-- RS 09DEC24 Changed keys-->\n    <!-- Group Actions -->\n    <!-- HA 19DEC23 For Direction -->\n    <!-- AP 23MAY25 - Action Buttons: Dynamically positioned buttons with JSON-configured styles -->\n    <div class=\"align-submit-row\" *ngIf=\"abItem?.status != 'Completed'\" [dir]=\"direction\"> <!-- position-relative removed in this tag-->\n        <ng-container  *ngFor=\"let action of actions; let i = index\">\n            <div class=\"action-wrapper\"\n                [style.width.px]=\"action.width || 100\"\n                style=\"margin-right: 10px;\">  <!-- style=\"position: absolute; [style.left.%]=\"action.positionPercent || 0\"  removed in this tag -->\n                @if(!isEdit && action.name === 'Save'){\n                    <button \n                        (click)=\"editChangeClick(action)\" \n                        class=\"btn btn-primary fc-button nxtButton action-btn\"\n                        [style.--btn-bg]=\"action.bgColor\"\n                        [style.background-color]=\"action.bgColor || ''\"\n                        [style.color]=\"action.textColor || ''\"\n                        [style.border-radius.px]=\"action.borderRadius || 4\"\n                        style=\"width: 100%;\">\n                        {{ 'EDIT' | nxtCustomTranslate : 'Edit'}}\n                    </button>\n                }\n                @else {\n                    <button \n                        (click)=\"handleBookletActionClick(action)\" \n                        class=\"btn btn-primary fc-button nxtButton action-btn\"\n                        [style.--btn-bg]=\"action.bgColor\"\n                        [style.background-color]=\"action.bgColor || ''\"\n                        [style.color]=\"action.textColor || ''\"\n                        [style.border-radius.px]=\"action.borderRadius || 4\"\n                        style=\"width: 100%;\">\n                        {{ (action.id+'.name') | nxtCustomTranslate : action?.name}}\n                    </button>\n                }\n            </div>\n        </ng-container>\n    </div>\n</div>", styles: [".align-submit-row{display:flex}.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"] }]
         }], ctorParameters: () => [{ type: SalesforceService }, { type: DataService }, { type: StorageService }, { type: i1$1.DomSanitizer }, { type: ChangeService }, { type: i1.HttpClient }, { type: TranslationService }], propDecorators: { bookletId: [{
                 type: Input
             }], serv: [{
@@ -60344,7 +60347,7 @@ const VERSION = {
     "semver": null,
     "suffix": "09440148-dirty",
     "semverString": null,
-    "version": "2.1.255-beta"
+    "version": "2.1.256"
 };
 /* tslint:enable */
@@ -62771,11 +62774,11 @@ class PdfDesignerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PdfDesignerComponent, deps: [{ token: PdfDesignerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n<!-- \n      <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div> -->\n\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>\n    <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n    <div class=\"form-preview\">\n      <!-- AP-10MAR25 Heading -->\n      <div class=\"field-container\"\n        style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n        (click)=\"selectHeading('Header')\">\n        <div class=\"label-container\" style=\"padding: 10px; display: flex;justify-content: space-between;\">\n          <div *ngIf=\"pdf\">\n            <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n            <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n          </div>\n          <div class=\"action-buttons\">\n            <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n            <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n          </div>\n        </div>\n      </div>\n\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n        </div>\n\n        <!--SKS25MAR25 Image Upload Element -->\n        <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [class.highlight]=\"selectedFieldIndex === i && !isPreview\" draggable=\"true && !isPreview\"\n          (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" (mouseenter)=\"isImageHover = true;\"\n          (mouseleave)=\"isImageHover = false;\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div>\n                  <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                        fill=\"#6C757D\" />\n                    </svg>\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" \n                      [style.width.px]=\"field.imageSize?.width || 100\"\n                      [style.height.px]=\"field.imageSize?.height || 100\" />\n                    </div>\n\n                    <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                      <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                        <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                        <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                      </label>\n                      <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                        style=\"display: none;\" />\n                    </div>\n                  </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Space Element -->\n        <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div *ngIf=\"!isPreview\" class=\"field-content\">\n              <div class=\"label-container\">\n                <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\"\n              [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n              [value]=\"field.value? field.value : ''\"\n              (input)=\"onTextAreaInput($event, field)\"\n              #autoTextarea\n              [style.height.px]=\"isPreview ? 40 : null\"\n              (click)=\"openTextSettings(field, $event)\"\n              (ngModelChange)=\"updateContent()\" \n              [ngStyle]=\"{\n                'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n                'font-weight': field.style?.bold ? 'bold' : 'normal',\n                'font-style': field.style?.italics ? 'italic' : 'normal',\n                'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n                'text-align': field.style?.alignment || 'left',\n                'margin': field.style?.margin?.length === 4\n                  ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n                    field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n                  : '0',\n                'color': field.style?.color || '#000'\n              }\"></textarea>\n            \n            </div>\n          </div>\n\n                           <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                           <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n                           [ngStyle]=\"{\n                             position: 'absolute',\n                             background: '#fff',\n                             border: '1px solid #ccc',\n                             padding: '6px 10px',\n                             'border-radius': '4px',\n                             'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                             'z-index': '65535',\n                             display: 'flex',\n                             'align-items': 'center',\n                             gap: '8px'\n                           }\">\n                         \n                           <!-- Font Size -->\n                           <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                             <option [value]=\"12\">12pt</option>\n                             <option [value]=\"14\">14pt</option>\n                             <option [value]=\"16\">16pt</option>\n                             <option [value]=\"18\">18pt</option>\n                             <option [value]=\"24\">24pt</option>\n                           </select>\n\n                          <!-- Text Color -->\n                          <label title=\"Text Color\" class=\"color-label\">\n                          <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                          <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                          </label>\n\n                           <!-- Bold -->\n                           <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n                         \n                           <!-- Italic -->\n                           <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n                           <!-- Underline -->\n                           <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n\n                         \n                           <!-- Align Left -->\n                           <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n                           </button>\n                         \n                           <!-- Align Center -->\n                           <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n                           </button>\n                         \n                           <!-- Align Right -->\n                           <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n                           </button>\n                         \n                           <!-- Close -->\n                           <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                         </div>\n                          \n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace custom date picker -->\n              <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div>\n                          <div class=\"logo-container\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                              <img [src]=\"field.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                              <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n                         (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-14JUN25 Added nxt-input in pdf -->\n                  <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\"> \n                        <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n                          [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n                        </nxt-input>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!--  Table  -->\n        <!-- AP-06MAR25 -->\n        <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview\" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n\n          <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n            <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.width\"\n              (input)=\"onImageSizeChange()\" />\n          \n            <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.height\"\n              (input)=\"onImageSizeChange()\" />\n          </div>\n          \n\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PdfDesignerComponent, isStandalone: true, selector: "app-pdf-designer", inputs: { pdfJSON: "pdfJSON", bookletId: "bookletId", isPreview: "isPreview" }, outputs: { pdfSaveHandlerEmit: "pdfSaveHandlerEmit", templateMode: "templateMode", pdfPreviewEmit: "pdfPreviewEmit" }, viewQueries: [{ propertyName: "textareas", predicate: ["autoTextarea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n<!-- \n      <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div> -->\n\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>\n    <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n    <div class=\"form-preview\">\n      <!-- AP-10MAR25 Heading -->\n      <div class=\"field-container\"\n        style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n        (click)=\"selectHeading('Header')\">\n        <div class=\"label-container\" style=\"padding: 10px; display: flex;justify-content: space-between;\">\n          <div *ngIf=\"pdf\">\n            <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n            <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n          </div>\n          <div class=\"action-buttons\">\n            <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n            <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n          </div>\n        </div>\n      </div>\n\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n        </div>\n\n        <!--SKS25MAR25 Image Upload Element -->\n        <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [class.highlight]=\"selectedFieldIndex === i && !isPreview\" draggable=\"true && !isPreview\"\n          (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" (mouseenter)=\"isImageHover = true;\"\n          (mouseleave)=\"isImageHover = false;\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div>\n                  <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                        fill=\"#6C757D\" />\n                    </svg>\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" \n                      [style.width.px]=\"field.imageSize?.width || 100\"\n                      [style.height.px]=\"field.imageSize?.height || 100\" />\n                    </div>\n\n                    <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                      <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                        <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                        <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                      </label>\n                      <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                        style=\"display: none;\" />\n                    </div>\n                  </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Space Element -->\n        <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div *ngIf=\"!isPreview\" class=\"field-content\">\n              <div class=\"label-container\">\n                <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\"\n              [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n              [value]=\"field.value? field.value : ''\"\n              (input)=\"onTextAreaInput($event, field)\"\n              #autoTextarea\n              [style.height.px]=\"isPreview ? 40 : null\"\n              (click)=\"openTextSettings(field, $event)\"\n              (ngModelChange)=\"updateContent()\" \n              [ngStyle]=\"{\n                'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n                'font-weight': field.style?.bold ? 'bold' : 'normal',\n                'font-style': field.style?.italics ? 'italic' : 'normal',\n                'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n                'text-align': field.style?.alignment || 'left',\n                'margin': field.style?.margin?.length === 4\n                  ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n                    field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n                  : '0',\n                'color': field.style?.color || '#000'\n              }\"></textarea>\n            \n            </div>\n          </div>\n\n                           <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                           <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n                           [ngStyle]=\"{\n                             position: 'absolute',\n                             background: '#fff',\n                             border: '1px solid #ccc',\n                             padding: '6px 10px',\n                             'border-radius': '4px',\n                             'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                             'z-index': '65535',\n                             display: 'flex',\n                             'align-items': 'center',\n                             gap: '8px'\n                           }\">\n                         \n                           <!-- Font Size -->\n                           <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                             <option [value]=\"12\">12pt</option>\n                             <option [value]=\"14\">14pt</option>\n                             <option [value]=\"16\">16pt</option>\n                             <option [value]=\"18\">18pt</option>\n                             <option [value]=\"24\">24pt</option>\n                           </select>\n\n                          <!-- Text Color -->\n                          <label title=\"Text Color\" class=\"color-label\">\n                          <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                          <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                          </label>\n\n                           <!-- Bold -->\n                           <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n                         \n                           <!-- Italic -->\n                           <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n                           <!-- Underline -->\n                           <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n\n                         \n                           <!-- Align Left -->\n                           <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n                           </button>\n                         \n                           <!-- Align Center -->\n                           <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n                           </button>\n                         \n                           <!-- Align Right -->\n                           <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n                           </button>\n                         \n                           <!-- Close -->\n                           <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                         </div>\n                          \n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace custom date picker -->\n              <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div>\n                          <div class=\"logo-container\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                              <img [src]=\"field.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                              <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n                         (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-14JUN25 Added nxt-input in pdf -->\n                  <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\"> \n                        <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n                          [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n                        </nxt-input>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!--  Table  -->\n        <!-- AP-06MAR25 -->\n        <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview\" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n\n          <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n            <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.width\"\n              (input)=\"onImageSizeChange()\" />\n          \n            <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.height\"\n              (input)=\"onImageSizeChange()\" />\n          </div>\n          \n\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:15px;height:15px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "component", type: PdfPropertiesComponent, selector: "app-pdf-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: NxtInput, selector: "nxt-input", inputs: ["label", "labelFont", "labelWeight", "inputWeight", "labelSize", "inputValueSize", "labelColor", "showLabel", "svgHeight", "svgWidth", "type", "inputIconRightSrc", "inputIconLeftSrc", "required", "minLength", "pattern", "errorMessages", "maxLength", "placeholder", "inputBgColor", "inputBorder", "placeholderColor", "placeholderFont", "placeholderWeight", "placeholderSize", "inputTextColor", "inputHeight", "inputWidth", "inputId", "inputBorderSize", "inputConfig", "confPassVal", "confPass", "mode", "value", "question", "showSuggestion", "ariaOwns", "ariaHasPopup", "isLoading", "options", "minDate", "maxDate", "rows", "from", "hyperLink", "size"], outputs: ["valueChange", "inputValue", "onBlur", "onFocus", "toggleEmit", "nativeInputRef", "removeValueEmit", "hyperlinkEmit"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PdfDesignerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-pdf-designer', standalone: true, imports: [CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, NxtInput, NxtCustomTranslatePipe], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n<!-- \n      <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div> -->\n\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>\n    <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n    <div class=\"form-preview\">\n      <!-- AP-10MAR25 Heading -->\n      <div class=\"field-container\"\n        style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n        (click)=\"selectHeading('Header')\">\n        <div class=\"label-container\" style=\"padding: 10px; display: flex;justify-content: space-between;\">\n          <div *ngIf=\"pdf\">\n            <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n            <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n          </div>\n          <div class=\"action-buttons\">\n            <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n            <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n          </div>\n        </div>\n      </div>\n\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n        </div>\n\n        <!--SKS25MAR25 Image Upload Element -->\n        <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [class.highlight]=\"selectedFieldIndex === i && !isPreview\" draggable=\"true && !isPreview\"\n          (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" (mouseenter)=\"isImageHover = true;\"\n          (mouseleave)=\"isImageHover = false;\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div>\n                  <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                        fill=\"#6C757D\" />\n                    </svg>\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" \n                      [style.width.px]=\"field.imageSize?.width || 100\"\n                      [style.height.px]=\"field.imageSize?.height || 100\" />\n                    </div>\n\n                    <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                      <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                        <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                        <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                      </label>\n                      <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                        style=\"display: none;\" />\n                    </div>\n                  </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Space Element -->\n        <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div *ngIf=\"!isPreview\" class=\"field-content\">\n              <div class=\"label-container\">\n                <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\"\n              [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n              [value]=\"field.value? field.value : ''\"\n              (input)=\"onTextAreaInput($event, field)\"\n              #autoTextarea\n              [style.height.px]=\"isPreview ? 40 : null\"\n              (click)=\"openTextSettings(field, $event)\"\n              (ngModelChange)=\"updateContent()\" \n              [ngStyle]=\"{\n                'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n                'font-weight': field.style?.bold ? 'bold' : 'normal',\n                'font-style': field.style?.italics ? 'italic' : 'normal',\n                'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n                'text-align': field.style?.alignment || 'left',\n                'margin': field.style?.margin?.length === 4\n                  ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n                    field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n                  : '0',\n                'color': field.style?.color || '#000'\n              }\"></textarea>\n            \n            </div>\n          </div>\n\n                           <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                           <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n                           [ngStyle]=\"{\n                             position: 'absolute',\n                             background: '#fff',\n                             border: '1px solid #ccc',\n                             padding: '6px 10px',\n                             'border-radius': '4px',\n                             'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                             'z-index': '65535',\n                             display: 'flex',\n                             'align-items': 'center',\n                             gap: '8px'\n                           }\">\n                         \n                           <!-- Font Size -->\n                           <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                             <option [value]=\"12\">12pt</option>\n                             <option [value]=\"14\">14pt</option>\n                             <option [value]=\"16\">16pt</option>\n                             <option [value]=\"18\">18pt</option>\n                             <option [value]=\"24\">24pt</option>\n                           </select>\n\n                          <!-- Text Color -->\n                          <label title=\"Text Color\" class=\"color-label\">\n                          <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                          <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                          </label>\n\n                           <!-- Bold -->\n                           <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n                         \n                           <!-- Italic -->\n                           <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n                           <!-- Underline -->\n                           <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n\n                         \n                           <!-- Align Left -->\n                           <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n                           </button>\n                         \n                           <!-- Align Center -->\n                           <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n                           </button>\n                         \n                           <!-- Align Right -->\n                           <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n                           </button>\n                         \n                           <!-- Close -->\n                           <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                         </div>\n                          \n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace custom date picker -->\n              <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div>\n                          <div class=\"logo-container\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                              <img [src]=\"field.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                              <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n                         (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-14JUN25 Added nxt-input in pdf -->\n                  <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\"> \n                        <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n                          [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n                        </nxt-input>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!--  Table  -->\n        <!-- AP-06MAR25 -->\n        <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview\" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n\n          <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n            <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.width\"\n              (input)=\"onImageSizeChange()\" />\n          \n            <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.height\"\n              (input)=\"onImageSizeChange()\" />\n          </div>\n          \n\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:19px;height:19px;margin-top:-5px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;gap:10px;padding:6px;border:1px solid #d7edff;margin-top:-10px;background-color:#d7edff;margin-right:-10px;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s ease-in-out,visibility .1s ease-in-out}.drag-dot{height:13px}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}\n"] }]
+            args: [{ selector: 'app-pdf-designer', standalone: true, imports: [CommonModule, ImageCropperComponent, PdfPropertiesComponent, MatTooltipModule, FormsModule, NxtDatatable, NxtInput, NxtCustomTranslatePipe], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"form-container\" [ngClass]=\"{'isPreview': isPreview}\">\n  <div class=\"center-frame\" [ngClass]=\"{'isPreview': isPreview}\">\n    <!-- Form Builder Section All Elements -->\n    <div *ngIf=\"!isPreview\" class=\"form-builder\">\n\n      <ng-container *ngFor=\"let element of elementsList\">\n        <div\n            class=\"element\"\n            [class.disabled]=\"selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\"\n            (click)=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)) && addElement(element.type)\"\n            [draggable]=\"!(selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type))\"\n            [matTooltip]=\"\n              selectedElement?.type && elementDisabledArray[selectedElement.type]?.includes(element.type)\n                ? ('THIS_ELEMENT_NOT_SUPPORTED' | nxtCustomTranslate : 'This element is not supported when a ') +\n                  (selectedElement?.type || ('CERTAIN_ELEMENT' | nxtCustomTranslate : 'certain element')) +\n                  (' IS_PRESENT' | nxtCustomTranslate : ' is present')\n                : null\n            \"\n          >\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>      \n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n<!-- \n      <div class=\"template-section\">\n        <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates>\n      </div> -->\n\n      <!-- SKS10MAR25 footer version show -->\n      <div class=\"sticky-footer-version\">\n        {{version}}\n      </div>\n    </div>\n    <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n    <div class=\"form-preview\">\n      <!-- AP-10MAR25 Heading -->\n      <div class=\"field-container\"\n        style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;margin-bottom:10px\"\n        (click)=\"selectHeading('Header')\">\n        <div class=\"label-container\" style=\"padding: 10px; display: flex;justify-content: space-between;\">\n          <div *ngIf=\"pdf\">\n            <div *ngIf=\"pdf.title == ''\" style=\"color:#3f4a525c\">{{ 'HEADING' | nxtCustomTranslate : 'Heading' }}</div>\n            <div *ngIf=\"pdf.title !== ''\">{{pdf.title}}</div>\n          </div>\n          <div class=\"action-buttons\">\n            <button class=\"action-btn\" (click)=\"pdfSaveHandler('preview')\">{{ 'PREVIEW' | nxtCustomTranslate : 'PREVIEW' }}</button>\n            <button class=\"action-btn\" (click)=\"pdfSaveHandler('download')\">{{ 'DOWNLOAD' | nxtCustomTranslate : 'DOWNLOAD' }}</button>\n          </div>\n        </div>\n      </div>\n\n      <ng-container *ngFor=\"let field of pdfElements; let i = index\">\n\n        <!-- AP-19MAR25 Line Element -->\n        <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\" [ngClass]=\"{'isPreview': isPreview}\"\n          (click)=\"selectElement(i)\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div *ngIf=\"!isPreview\" class=\"line-element\">\n            <div></div>\n            <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n          </div>\n          <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n        </div>\n\n        <!--SKS25MAR25 Image Upload Element -->\n        <div *ngIf=\"field?.type === 'image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [class.highlight]=\"selectedFieldIndex === i && !isPreview\" draggable=\"true && !isPreview\"\n          (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" (mouseenter)=\"isImageHover = true;\"\n          (mouseleave)=\"isImageHover = false;\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div>\n                  <div *ngIf=\"isImageHover\" style=\"display: flex; justify-content: end;\">\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageEdit(field)\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n                      fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M11.1067 6.07174L9.92833 4.8934L2.16667 12.6551V13.8334H3.345L11.1067 6.07174ZM12.285 4.8934L13.4633 3.71507L12.285 2.53674L11.1067 3.71507L12.285 4.8934ZM4.035 15.5001H0.5V11.9642L11.6958 0.768403C11.8521 0.612177 12.064 0.524414 12.285 0.524414C12.506 0.524414 12.7179 0.612177 12.8742 0.768403L15.2317 3.1259C15.3879 3.28218 15.4757 3.4941 15.4757 3.71507C15.4757 3.93604 15.3879 4.14796 15.2317 4.30424L4.03583 15.5001H4.035Z\"\n                        fill=\"#6C757D\" />\n                    </svg>\n                    <svg *ngIf=\"isPreview\" (click)=\"onImageDelete(field)\" width=\"16\" height=\"16\"\n                      viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M14 3.98726C11.78 3.76726 9.54667 3.65393 7.32 3.65393C6 3.65393 4.68 3.7206 3.36 3.85393L2 3.98726\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M5.6665 3.31362L5.81317 2.44028C5.91984 1.80695 5.99984 1.33362 7.1265 1.33362H8.87317C9.99984 1.33362 10.0865 1.83362 10.1865 2.44695L10.3332 3.31362\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path\n                        d=\"M12.5667 6.09375L12.1334 12.8071C12.06 13.8537 12 14.6671 10.14 14.6671H5.86002C4.00002 14.6671 3.94002 13.8537 3.86668 12.8071L3.43335 6.09375\"\n                        stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n                      <path d=\"M6.88647 11.0004H9.10647\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                      <path d=\"M6.3335 8.33325H9.66683\" stroke=\"#FF2C10\" stroke-width=\"1.5\" stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\" />\n                    </svg>\n                  </div>\n                  <div class=\"logo-container\">\n                    <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                      <img [src]=\"field.imageData\" \n                      [style.width.px]=\"field.imageSize?.width || 100\"\n                      [style.height.px]=\"field.imageSize?.height || 100\" />\n                    </div>\n\n                    <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                      <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                        <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                        <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                      </label>\n                      <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(field, $event)\"\n                        style=\"display: none;\" />\n                    </div>\n                  </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Space Element -->\n        <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div *ngIf=\"!isPreview\" class=\"field-content\">\n              <div class=\"label-container\">\n                <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- TextArea -->\n        <div *ngIf=\"field?.type === 'text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <textarea class=\"custom-textarea\"\n              [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n              [value]=\"field.value? field.value : ''\"\n              (input)=\"onTextAreaInput($event, field)\"\n              #autoTextarea\n              [style.height.px]=\"isPreview ? 40 : null\"\n              (click)=\"openTextSettings(field, $event)\"\n              (ngModelChange)=\"updateContent()\" \n              [ngStyle]=\"{\n                'font-size': field.style?.fontSize ? field.style.fontSize + 'px' : '14px',\n                'font-weight': field.style?.bold ? 'bold' : 'normal',\n                'font-style': field.style?.italics ? 'italic' : 'normal',\n                'text-decoration': field.style?.decoration ? 'decoration' : 'none',\n                'text-align': field.style?.alignment || 'left',\n                'margin': field.style?.margin?.length === 4\n                  ? field.style.margin[1] + 'px ' + field.style.margin[2] + 'px ' +\n                    field.style.margin[3] + 'px ' + field.style.margin[0] + 'px'\n                  : '0',\n                'color': field.style?.color || '#000'\n              }\"></textarea>\n            \n            </div>\n          </div>\n\n                           <!--AP-05JUN25 Text Settings Toolbar: Allows editing font size, bold/italic styles, alignment, and closing the toolbar for the selected column -->\n                           <div *ngIf=\"showTextSettings && isPreview && selectedColumn === field\" class=\"text-settings-toolbar\"\n                           [ngStyle]=\"{\n                             position: 'absolute',\n                             background: '#fff',\n                             border: '1px solid #ccc',\n                             padding: '6px 10px',\n                             'border-radius': '4px',\n                             'box-shadow': '0 2px 6px rgba(0, 0, 0, 0.1)',\n                             'z-index': '65535',\n                             display: 'flex',\n                             'align-items': 'center',\n                             gap: '8px'\n                           }\">\n                         \n                           <!-- Font Size -->\n                           <select [(ngModel)]=\"selectedColumn.style.fontSize\" class=\"toolbar-select\">\n                             <option [value]=\"12\">12pt</option>\n                             <option [value]=\"14\">14pt</option>\n                             <option [value]=\"16\">16pt</option>\n                             <option [value]=\"18\">18pt</option>\n                             <option [value]=\"24\">24pt</option>\n                           </select>\n\n                          <!-- Text Color -->\n                          <label title=\"Text Color\" class=\"color-label\">\n                          <span class=\"color-box\" [style.color]=\"selectedColumn.style.color || '#000'\" (click)=\"textColorInput.click()\">A</span>\n                          <input #textColorInput type=\"color\" [(ngModel)]=\"selectedColumn.style.color\" (change)=\"updateContent()\" class=\"color-picker-hidden\"/>\n                          </label>\n\n                           <!-- Bold -->\n                           <button (click)=\"toggleStyle('bold')\" [class.active]=\"selectedColumn?.style?.bold\" class=\"toolbar-btn\">{{ 'BOLD' | nxtCustomTranslate : 'B' }}</button>\n                         \n                           <!-- Italic -->\n                           <button (click)=\"toggleStyle('italic')\" [class.active]=\"selectedColumn?.style?.italics\" class=\"toolbar-btn\"><i>{{ 'ITALIC' | nxtCustomTranslate : 'I' }}</i></button>\n\n                           <!-- Underline -->\n                           <!-- <button (click)=\"toggleStyle('underline')\" [class.active]=\"selectedColumn?.style?.underline\" class=\"toolbar-btn\"><u>U</u></button> -->\n\n                         \n                           <!-- Align Left -->\n                           <button (click)=\"setAlignment('left')\" [class.active]=\"selectedColumn?.style?.alignment === 'left'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_LEFT' | nxtCustomTranslate : 'format_align_left' }}</span>\n                           </button>\n                         \n                           <!-- Align Center -->\n                           <button (click)=\"setAlignment('center')\" [class.active]=\"selectedColumn?.style?.alignment === 'center'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_CENTER' | nxtCustomTranslate : 'format_align_center' }}</span>\n                           </button>\n                         \n                           <!-- Align Right -->\n                           <button (click)=\"setAlignment('right')\" [class.active]=\"selectedColumn?.style?.alignment === 'right'\" class=\"toolbar-btn\">\n                             <span class=\"material-icons\">{{ 'FORMAT_ALIGN_RIGHT' | nxtCustomTranslate : 'format_align_right' }}</span>\n                           </button>\n                         \n                           <!-- Close -->\n                           <button (click)=\"closeTextSettings()\" class=\"toolbar-btn\" style=\"margin-left: auto;\">\u2715</button>\n                         </div>\n                          \n        </div>\n\n        <!-- Input -->\n        <div *ngIf=\"field?.type === 'input'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace app-custom-input -->\n              <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Date -->\n        <div *ngIf=\"field?.type === 'date'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- AP-04JUN25 - replace custom date picker -->\n              <nxt-input [type]=\"'date'\" [mode]=\"'edit'\" [value]=\"field.value\" [question]=\"\" [labelFont]=\"\"\n                [label]=\"field?.questionText\" [labelColor]=\"\" [labelSize]=\"\" [inputValueSize]=\"\" [labelWeight]=\"\"\n                [inputWeight]=\"\" [showLabel]=\"\" inputBorder=\"none\" svgHeight=\"20px\" svgWidth=\"20px\"\n                [placeholder]=\"field.question ? field.question : 'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" [required]=\"\"\n                inputBgColor=\"#F5F5F5\" [inputId]=\"\" [errorMessages]=\"{ required: 'This field is required' }\"\n                [inputIconLeftSrc]=\"''\" (inputValue)=\"onQuestionChange($event, field)\">\n              </nxt-input>\n            </div>\n          </div>\n        </div>\n\n        <!-- Pdf -->\n        <div *ngIf=\"field?.type === 'Pdf'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <!-- <lib-booklet [bookletJSON]=\"field.pdfReferenceQuestions\"></lib-booklet> -->\n              <div *ngIf=\"field?.pdfReferenceQuestions\">\n                <ng-container *ngFor=\"let field of field?.pdfReferenceQuestions[field?.pdfReference]; let i = index\">\n                  <!-- AP-19MAR25 Line Element -->\n                  <div *ngIf=\"field?.type === 'Line'\" class=\"line-field\">\n                    <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-weight': field.fontWeight || '400',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'text-align': field.textAlign || 'left',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'border-style': (field.lineStyle?.toLowerCase() || 'solid'),\n    'color': field.fontColor || '#000000',\n    'margin-top': (field.paddingTop || 0) + 'px',\n    'margin-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" />\n                  </div>\n\n                  <div *ngIf=\"field?.type === 'image'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div>\n                          <div class=\"logo-container\">\n                            <!-- Logo preview area -->\n                            <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                              <img [src]=\"field.imageData\" />\n                            </div>\n\n                            <!-- Upload button -->\n                            <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                              <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                                <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                                <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                              </label>\n                              <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\"\n                                (change)=\"fileChangeEvent(field, $event)\" style=\"display: none;\" />\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'Space'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"height:93px\" [ngClass]=\"{'isPreview': isPreview}\">\n                    </div>\n                  </div>\n                  <div *ngIf=\"field?.type === 'text'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <textarea class=\"custom-textarea\" [placeholder]=\"'ENTER_DETAILED_TEXT_HERE' | nxtCustomTranslate : 'Enter detailed text here...'\"\n                          [style.height.px]=\"isPreview ? 40 : field.size || 100\" [(ngModel)]=\"field.value\"\n                         (ngModelChange)=\"onQuestionChange($event, field)\"></textarea>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-14JUN25 Added nxt-input in pdf -->\n                  <div *ngIf=\"field?.type === 'input'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\"> \n                        <nxt-input [type]=\"'text'\" [mode]=\"'edit'\" [(ngModel)]=\"field.value\"\n                          [placeholder]=\"'ENTER_YOUR_INPUT' | nxtCustomTranslate : 'Enter your input'\" (ngModelChange)=\"onQuestionChange($event, field)\">\n                        </nxt-input>\n                      </div>\n                    </div>\n                  </div>\n                  <!-- AP-06MAR25 -->\n                  <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\">\n                    <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n                      <div class=\"field-content\">\n                        <div class=\"nxt-table-container\">\n                          <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\"\n                            [mode]=\"isPreview ? 'view' : 'edit'\" [apiMeta]=\"field?.subText\"\n                            [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\"\n                            (valueChange)=\"onQuestionChange($event, field)\"\n                            [data]=\"field.value?.data\"\n                            isEditable=true (columnSelected)=columnSelected($event) (removeColumn)=removeColumn($event)>\n                          </nxt-datatable>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!--  Table  -->\n        <!-- AP-06MAR25 -->\n        <div *ngIf=\"field?.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\"\n          [ngStyle]=\"{\n    'font-family': field.font || 'Helvetica Neue',\n    'font-size': (field.fontSize || 14) + 'px',\n    'width': (field.width || 100) + '%',\n    'align-items': field.alignItems || '',\n    'border-radius': '5px',\n    'border-width': (field.lineWidth || 1) + 'px',\n    'color': field.fontColor || '#000000',\n    'font-style': (field.fontStyle || []).includes('italic') ? 'italic' : 'normal',\n    'font-weight': (field.fontStyle || []).includes('bold') ? 'bold' : (field.fontWeight || '400'),\n    'margin': \n      (field.margin?.[0] || 0) + 'px ' +\n      (field.margin?.[1] || 0) + 'px ' +\n      (field.margin?.[2] || 0) + 'px ' +\n      (field.margin?.[3] || 0) + 'px',\n    'padding-top': (field.paddingTop || 0) + 'px',\n    'padding-bottom': (field.paddingBottom ?? 10) + 'px'\n  }\" [class.highlight]=\"selectedFieldIndex === i && !isPreview\"\n          draggable=\"true && !isPreview\" (dragstart)=\"onDragStart($event, i)\" (dragover)=\"onDragOver($event, i)\"\n          (drop)=\"onDrop($event, i)\">\n          <div class=\"field-wrapper\" style=\"overflow: hidden;\" [ngClass]=\"{'isPreview': isPreview}\">\n            <div class=\"field-content\">\n              <div *ngIf=\"!isPreview\" class=\"label-container\">\n                <div class=\"top-right\">\n                  <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                  <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n                </div>\n              </div>\n              <div class=\"nxt-table-container\">\n                <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"isPreview ? 'view' : 'edit'\"\n                  [apiMeta]=\"field?.subText\" [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\"\n                  tableWidth=\"auto\" isEditable=true (columnSelected)=columnSelected($event)\n                  [data]=\"field.value?.data\"\n                  (valueChange)=\"onQuestionChange($event, field)\"\n                  (removeColumn)=removeColumn($event)>\n                </nxt-datatable>\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </ng-container>\n    </div>\n  </div>\n  <!-- SKS13MAR25 popup conformation box -->\n  <div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n    <div class=\"dialog-box\">\n      <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n      <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n      <div class=\"button-container-fb\">\n        <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n        <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n      </div>\n    </div>\n  </div>\n  <app-pdf-properties *ngIf=\"!isPreview\" (formButtonHandler)=\"pdfSaveHandler($event)\"></app-pdf-properties>\n</div>\n<!--SKS25MAR25 Modal Overlay -->\n<div class=\"modal-overlay\" *ngIf=\"isImageEdit\">\n  <div class=\"modal-content\">\n      <span class=\"close-button\" (click)=\"closeModal()\">\u00D7</span>\n      <!-- Image Editor -->\n      <div *ngIf=\"selectedImageElement?.type === 'image'\">\n          <image-cropper *ngIf=\"selectedImageElement.imageData\" [imageBase64]=\"selectedImageElement.orgImageData\"\n              [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n              imageAltText=\"{{ 'ALTERNATIVE_IMAGE_TEXT' | nxtCustomTranslate : 'Alternative image text' }}\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n              [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n              [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n              [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n              [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n              [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n              [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n              (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\">\n          </image-cropper>\n\n          <!--AP-20JUN25 - Image size controls: Allow user to manually adjust width and height using range sliders -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"manual-size-inputs\">\n            <label>{{ 'WIDTH' | nxtCustomTranslate : 'Width' }} {{ selectedImageElement.imageSize.width }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.width\"\n              (input)=\"onImageSizeChange()\" />\n          \n            <label>{{ 'HEIGHT' | nxtCustomTranslate : 'Height' }} {{ selectedImageElement.imageSize.height }}</label>\n            <input type=\"range\" min=\"50\" max=\"300\" step=\"1\"\n              [(ngModel)]=\"selectedImageElement.imageSize.height\"\n              (input)=\"onImageSizeChange()\" />\n          </div>\n          \n\n          <!-- Controls -->\n          <div *ngIf=\"selectedImageElement.imageData\" class=\"controls\">\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"{{ 'ROTATE_LEFT' | nxtCustomTranslate : 'Rotate Left' }}\">\u27F2</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"{{ 'ROTATE_RIGHT' | nxtCustomTranslate : 'Rotate Right' }}\">\u27F3</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"{{ 'ZOOM_OUT' | nxtCustomTranslate : 'Zoom Out' }}\">-</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"{{ 'ZOOM_IN' | nxtCustomTranslate : 'Zoom In' }}\">+</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"{{ 'MOVE_LEFT' | nxtCustomTranslate : 'Move Left' }}\">\u2190</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"{{ 'MOVE_RIGHT' | nxtCustomTranslate : 'Move Right' }}\">\u2192</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"{{ 'MOVE_UP' | nxtCustomTranslate : 'Move Up' }}\">\u2191</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"{{ 'MOVE_DOWN' | nxtCustomTranslate : 'Move Down' }}\">\u2193</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n              title=\"{{ 'FLIP_HORIZONTALLY' | nxtCustomTranslate : 'Flip Horizontally' }}\">\u2194</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n              title=\"{{ 'FLIP_VERTICALLY' | nxtCustomTranslate : 'Flip Vertically' }}\">\u2195</div>\n            <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"{{ 'RESET' | nxtCustomTranslate : 'Reset' }}\">\u00D7</div>\n          </div>\n      </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.form-builder .element:hover .dot{background-color:#ffffffb3}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.field-wrapper.isPreview{background-color:transparent;border:none;border-radius:0;padding:0}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:15px;height:15px}.field-container{padding-right:5px;padding-left:5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right,.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:calc(100vh - 20px)}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:flex-end;align-items:center}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.drag-dot{height:10px;cursor:grab}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.form-builder .element .drag-dots:active{cursor:grabbing}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.line-field{width:100%;margin:10px 0;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:3px}.line-field{background-color:transparent;border:none;border-radius:0;padding:3px}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer;inline-size:auto}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.element.disabled{opacity:.5;cursor:not-allowed}.form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}.form-container.isPreview{border:none}.center-frame{width:74%}.center-frame.isPreview{width:100%}app-pdf-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}:host ::ng-deep .custom-textarea{min-height:40px!important}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.modal-content{background:#fff;padding:20px;width:500px;max-width:90%;border-radius:8px;position:relative;text-align:center}.close-button{position:absolute;top:6px;right:6px;font-size:25px;cursor:pointer;z-index:10}.controls{display:flex;gap:5px;justify-content:center;margin-top:10px}.logo-icon{cursor:pointer;padding:5px;border-radius:5px;background:#d3d3d3}.logo-icon:hover{background:#a9a9a9}.enabled{background:#007bff;color:#fff}.text-settings-toolbar{position:absolute;display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid #d1d5db;padding:8px 10px;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:65535;max-width:100%;width:auto;min-width:200px;box-sizing:border-box}.toolbar-select{padding:4px 6px;font-size:13px;border:1px solid #d1d5db;border-radius:6px;background:#fff;cursor:pointer;min-width:60px;width:auto}.toolbar-btn{background:#f3f4f6;border:1px solid #d1d5db;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px;min-width:30px;height:30px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e5e7eb;border-color:#9ca3af}.toolbar-btn.active{background:#005aaa;color:#fff;border-color:#005aaa}.color-label{display:flex;align-items:center}.color-box{font-weight:700;width:22px;height:22px;font-size:13px;border:1px solid #ccc;border-radius:4px;text-align:center;line-height:22px;cursor:pointer;padding:0}.color-picker-hidden{position:absolute;opacity:0;pointer-events:none;width:0;height:0}@media (max-width: 600px){.text-settings-toolbar{flex-direction:row;flex-wrap:wrap;gap:6px;padding:6px;justify-content:flex-start}.toolbar-btn,.toolbar-select{font-size:12px;padding:5px}.color-box{width:20px;height:20px;font-size:12px;line-height:20px}}.action-buttons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.action-btn{display:flex;gap:16px;padding:10px 15px;border-radius:8px;border:none}\n"] }]
         }], ctorParameters: () => [{ type: PdfDesignerService }], propDecorators: { textareas: [{
                 type: ViewChildren,
                 args: ['autoTextarea']
@@ -64912,7 +64915,7 @@ class ElementComponent {
         this.translationService.setFormBuilderLanguage(this.languageCode);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ElementComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FormBuilderService }, { token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <app-custom-dropdown [options]=\"langOption\" [selectedValue]=\"languageCode\" [from]=\"'normalDropDown'\"\n        [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n        style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </app-custom-dropdown>\n    </div>\n\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- TextBox -->\n      <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n      <!-- MSM-09JUL25 Icon-selectir Element -->\n      <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"choose-icon-placeholder\">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF',\n  'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n}\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n                nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date &\n                  Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n                  nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n            'font-family': field?.font || 'Helvetica Neue',\n            'font-weight': field?.fontWeight || '400',\n            'font-size': field?.fontSize || '14px',\n            'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n            'text-align': field?.textAlign || 'left',\n            'border-radius': '5px',\n            'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n            'color': field?.fontColor || '#000000',\n            'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n            'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n            'border-color': field?.color || '#EFF8FF'\n          }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{  option.label  }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{  option.label  }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n                (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:13px}.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;gap:10px;padding:6px;border:1px solid #d7edff;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:19px;height:19px;margin-top:-5px}.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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId", langOption: "langOption", languageCode: "languageCode" }, outputs: { templateMode: "templateMode" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <app-custom-dropdown [options]=\"langOption\" [selectedValue]=\"languageCode\" [from]=\"'normalDropDown'\"\n        [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n        style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </app-custom-dropdown>\n    </div>\n\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- TextBox -->\n      <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n      <!-- MSM-09JUL25 Icon-selectir Element -->\n      <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"choose-icon-placeholder\">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF',\n  'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n}\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n                nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date &\n                  Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n                  nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n            'font-family': field?.font || 'Helvetica Neue',\n            'font-weight': field?.fontWeight || '400',\n            'font-size': field?.fontSize || '14px',\n            'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n            'text-align': field?.textAlign || 'left',\n            'border-radius': '5px',\n            'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n            'color': field?.fontColor || '#000000',\n            'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n            'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n            'border-color': field?.color || '#EFF8FF'\n          }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{  option.label  }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{  option.label  }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n                (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:10px;cursor:grab}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:15px;height:15px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: BookletComponent, selector: "lib-booklet", inputs: ["bookletId", "serv", "tkn", "bookletJSON", "allIcons", "themeColor", "cdnIconURL", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "direction", "dataBind"], outputs: ["handleBookletActionEvent", "handlePage", "hadleDropDownDependent", "handleCalendarDate", "handleCalendarEvent"] }, { kind: "component", type: NxtDatatable, selector: "nxt-datatable", inputs: ["data", "tableFilterData", "columns", "withCheckBox", "searchBar", "tableSaveButton", "stickyColumn", "tableWidth", "actionColumHeader", "actionButton", "title", "isButtons", "buttonArray", "tableId", "isEditRow", "isDeleteRow", "addInlineRecord", "searchConfigs", "direction", "pagination", "actionButtonArray", "multipleFilter", "isPagination", "isNosIndicator", "isEditable", "from", "question", "rowTextSize", "rowTextColor", "apiMeta", "summaryRows", "summaryColumns", "isLoading", "tableConfig", "tableParams", "listViews", "mode", "languageCode", "selectedColumn", "allIcons"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "hadleDropDownDependent", "NxtTableEmit"] }, { kind: "component", type: CustomDropdownComponent, selector: "app-custom-dropdown", inputs: ["options", "placeholder", "apiMeta", "selectedValue", "progressBar", "id", "readOnly", "errorMessage", "error", "fromShengel", "question", "referenceField", "token", "mode", "from"], outputs: ["valueChange"] }, { kind: "pipe", type: NxtCustomTranslatePipe, name: "nxtCustomTranslate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ElementComponent, decorators: [{
             type: Component,
@@ -64923,7 +64926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         NxtDatatable,
                         CustomDropdownComponent,
                         NxtCustomTranslatePipe
-                    ], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <app-custom-dropdown [options]=\"langOption\" [selectedValue]=\"languageCode\" [from]=\"'normalDropDown'\"\n        [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n        style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </app-custom-dropdown>\n    </div>\n\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- TextBox -->\n      <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n      <!-- MSM-09JUL25 Icon-selectir Element -->\n      <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"choose-icon-placeholder\">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF',\n  'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n}\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n                nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date &\n                  Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n                  nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n            'font-family': field?.font || 'Helvetica Neue',\n            'font-weight': field?.fontWeight || '400',\n            'font-size': field?.fontSize || '14px',\n            'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n            'text-align': field?.textAlign || 'left',\n            'border-radius': '5px',\n            'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n            'color': field?.fontColor || '#000000',\n            'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n            'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n            'border-color': field?.color || '#EFF8FF'\n          }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{  option.label  }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{  option.label  }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n                (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:13px}.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;gap:10px;padding:6px;border:1px solid #d7edff;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;cursor:grab;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:19px;height:19px;margin-top:-5px}.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"] }]
+                    ], template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n  <!-- Form Builder Section All Elements -->\n  <div class=\"form-builder\">\n    <!-- Basic Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n      <div class=\"head-elements\">{{ 'BASIC_ELEMENTS' | nxtCustomTranslate : 'Basic Elements' }}</div>\n      <img [src]=\"sections.basic ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.basic\">\n      <ng-container *ngFor=\"let element of basicElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n\n    <!-- Advanced Elements Toggle -->\n    <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n      <div class=\"head-elements\">{{ 'ADVANCED_ELEMENTS' | nxtCustomTranslate : 'Advanced Elements' }}</div>\n      <img [src]=\"sections.advanced ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n        alt=\"Toggle Arrow\" class=\"arrow-icon\">\n    </div>\n\n    <div *ngIf=\"sections.advanced\">\n      <ng-container *ngFor=\"let element of advancedElements\">\n        <div class=\"element\" (click)=\"addElement(element.type)\">\n          <img src=\"../assets/icons/{{ element.img }}.svg\">\n          <div class=\"hover-label\">{{ element.label }}</div>\n          <div class=\"drag-dots\">\n            <div class=\"dot\" *ngFor=\"let dot of dots\"></div>\n          </div>\n        </div>\n      </ng-container>\n    </div>\n    <!-- AP-08APR25 Add Templates Component -->\n    <!-- <app-templates (templateSelected)=\"onTemplateSelected($event)\"></app-templates> -->\n\n    <!-- SKS10MAR25 footer version show -->\n    <div class=\"sticky-footer-version\">\n      {{version}}\n    </div>\n  </div>\n  <!-- AP-27MAR25 Remove CDK drag and drop replace draggable function  -->\n  <div class=\"form-preview\">\n    <!-- AP-10MAR25 Heading -->\n    <div style=\" display: flex; justify-content: space-between; width: 100%; gap: 10px;\">\n      <div class=\"label-container field-container\"\n        style=\"padding: 10px; width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px; border-radius: 5px;\"\n        [class.highlight]=\"isHeaderSelect\" (click)=\"selectHeading('Header')\">\n        <div *ngIf=\"book?.records\">\n          <div *ngIf=\"book.records[0].title == ''\" style=\"color:#3f4a525c\">Heading</div>\n          <div *ngIf=\"book.records[0].title !== ''\">{{book.records[0].title}}</div>\n        </div>\n      </div>\n      <app-custom-dropdown [options]=\"langOption\" [selectedValue]=\"languageCode\" [from]=\"'normalDropDown'\"\n        [mode]=\"'edit'\" (valueChange)=\"langChangeEmit($event.value)\"\n        style=\"margin-bottom: 10px; background: #eff8ff; border-radius: 5px;\">\n      </app-custom-dropdown>\n    </div>\n\n    <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n      <!-- TextBox -->\n      <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_TEXT' | nxtCustomTranslate : 'Enter text')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : '' \" />\n          </div>\n        </div>\n      </div>\n\n      <!-- MSM-09JUL25 Icon-selectir Element -->\n      <div *ngIf=\"field.type === 'Icon'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('CHOOSE_ICON' | nxtCustomTranslate : 'Choose Icon')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"choose-icon-placeholder\">\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-19MAR25 Line Element -->\n      <div *ngIf=\"field.type === 'Line'\" class=\"line-field\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"line-element\">\n          <div></div>\n          <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n        </div>\n        <hr class=\"custom-line\" style=\"display: inline-flex\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF',\n  'border-style': field?.lineStyle?.toLowerCase() || 'solid'\n}\" />\n      </div>\n\n      <!--SKS25MAR25 Image Upload Element -->\n      <div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\"\n        [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div>\n              <div class=\"logo-container\">\n                <!-- Logo preview area -->\n                <div class=\"logo-preview\" *ngIf=\"field.imageData\">\n                  <img [src]=\"field.imageData\" />\n                </div>\n\n                <!-- Upload button -->\n                <div *ngIf=\"!field.imageData\" class=\"logo-upload-placeholder\">\n                  <label for=\"logo-upload-{{i}}\" class=\"logo-upload-label\">\n                    <img src=\"../assets/icons/Image.svg\" alt=\"Upload\" />\n                    <span>{{ 'UPLOAD_IMAGE' | nxtCustomTranslate : 'Upload Image' }}</span>\n                  </label>\n                  <input type=\"file\" id=\"logo-upload-{{i}}\" accept=\"image/*\" (change)=\"fileChangeEvent(i, $event)\"\n                    style=\"display: none;\" />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Space Element -->\n      <div *ngIf=\"field.type === 'Space'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"height:93px\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\"></label>\n              <div class=\"top-right\" style=\"margin: -11px -11px 0 0;\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Boolean Element -->\n      <div *ngIf=\"field.type === 'Boolean'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"label-container\">\n            <div>\n              <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n                ? field.questionText : ('BOOLEAN' | nxtCustomTranslate : 'Boolean')}}</label>\n            </div>\n            <div class=\"top-right\">\n              <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n              <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n            </div>\n          </div>\n          <input type=\"checkbox\" [checked]=\"field.boolean\" (change)=\"toggleBoolean(field)\"\n            [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n        </div>\n      </div>\n\n      <!-- Calendar -->\n      <div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP -12MAR25 Date -->\n      <div *ngIf=\"field.type === 'Date'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE' | nxtCustomTranslate : 'Select Date')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n\n            </div>\n            <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-21MAR25 Add Time element -->\n      <!-- Time Field -->\n      <div *ngIf=\"field.type === 'Time'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <label [class.required]=\"field.isOptional\">{{ field.questionText ? field.questionText : ('TIME' |\n                nxtCustomTranslate : 'Time') }}</label>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"time\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- AP-28MAR25 DateTime -->\n      <div *ngIf=\"field.type === 'DateTime'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('SELECT_DATE_TIME' | nxtCustomTranslate : 'Select Date &\n                  Time')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n              [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Email -->\n      <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\"> {{ field.questionText ? field.questionText : ('LABEL' |\n                  nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"email\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_EMAIL' | nxtCustomTranslate : 'Enter email')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- Numbers -->\n      <div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"number\" class=\"custom-input\"\n              [placeholder]=\"field.question || ('ENTER_NUMBER' | nxtCustomTranslate : 'Enter number')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- TextArea -->\n      <div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question || ('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- RichText -->\n      <div *ngIf=\"field.type === 'RichTextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('ENTER_YOUR_TEXT' | nxtCustomTranslate : 'Enter your\n                  text')}}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <textarea class=\"custom-textarea\"\n              [placeholder]=\"field.question ||('ENTER_DETAILED_TEXT' | nxtCustomTranslate : 'Enter detailed text here...')\"\n              [style.height.px]=\"field.size || 100\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\"></textarea>\n          </div>\n        </div>\n      </div>\n\n      <!-- Label -->\n      <div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Book -->\n      <div *ngIf=\"field.type === 'Book'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <lib-booklet [bookletJSON]=\"field.qbReferenceQuestions\"></lib-booklet>\n          </div>\n        </div>\n      </div>\n\n      <!-- File -->\n      <div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('UPLOAD_FILE' | nxtCustomTranslate : 'Upload File')\n                  }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"file\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\n          </div>\n        </div>\n      </div>\n\n      <!-- CheckBox -->\n      <div *ngIf=\"field.type === 'Checkbox'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n            'font-family': field?.font || 'Helvetica Neue',\n            'font-weight': field?.fontWeight || '400',\n            'font-size': field?.fontSize || '14px',\n            'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n            'text-align': field?.textAlign || 'left',\n            'border-radius': '5px',\n            'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n            'color': field?.fontColor || '#000000',\n            'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n            'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n            'border-color': field?.color || '#EFF8FF'\n          }\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">\n                  {{ field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}\n                </label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n\n            <div class=\"checkbox-options-container\">\n              <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n                <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\"\n                  [value]=\"option.value || field.defaultValue\" class=\"checkbox-input\" [disabled]=\"field.isReadOnly\"\n                  [class.hidden]=\"field.isHidden\">\n                <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Radio -->\n      <div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"radio-options-container\">\n              <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n                <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\"\n                  [value]=\"option.value || field.defaultValue\" [(ngModel)]=\"field.selectedValue\" class=\"radio-input\"\n                  [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n                <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{  option.label  }}</label>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <!-- Dropdown -->\n      <div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <select id=\"options\" class=\"dropdown\" [disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n              <option *ngFor=\"let option of field.options\" [value]=\"option.value || field.defaultValue\"> {{  option.label  }} </option>\n            </select>\n          </div>\n        </div>\n      </div>\n\n      <!--  Table  -->\n      <!-- AP-06MAR25 -->\n      <div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\" style=\"overflow: hidden;\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <div class=\"nxt-table-container\">\n              <nxt-datatable isButtons [question]=\"field\" from=\"formBuilder\" [mode]=\"'edit'\" [apiMeta]=\"field.subText\"\n                [tableConfig]=\"field.tableConfig\" tableId=\"\" direction=\"ltr\" tableWidth=\"auto\" isEditable=true\n                [selectedColumn]=\"selectedColumn\" (columnSelected)=columnSelected($event)\n                (removeColumn)=removeColumn($event)>\n              </nxt-datatable>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- List -->\n      <!-- AP-06MAR25 - List data show-->\n      <div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"{\n  'font-family': field?.font || 'Helvetica Neue',\n  'font-weight': field?.fontWeight || '400',\n  'font-size': field?.fontSize || '14px',\n  'width': field?.size ? (field.size / 12 * 100) + '%' : '100%',\n  'text-align': field?.textAlign || 'left',\n  'border-radius': '5px',\n  'border-width': field?.lineWidth ? field.lineWidth + 'px' : '1px',\n  'color': field?.fontColor || '#000000',\n  'margin-top': field?.paddingTop ? field.paddingTop + 'px' : '0px',\n  'margin-bottom': field?.paddingBottom ? field.paddingBottom + 'px' : '10px',\n  'border-color': field?.color || '#EFF8FF'\n}\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\" (dragstart)=\"onDragStart($event, i)\"\n        (dragover)=\"onDragOver($event, i)\" (drop)=\"onDrop($event, i)\">\n        <div class=\"field-wrapper\">\n          <div class=\"field-content\">\n            <div class=\"label-container\">\n              <div>\n                <label [class.required]=\"field.isOptional\" *ngIf=\"field.style?.showLabel !== false\">{{\n                  field.questionText ? field.questionText : ('LABEL' | nxtCustomTranslate : 'Label') }}</label>\n              </div>\n              <div class=\"top-right\">\n                <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n                <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n              </div>\n            </div>\n            <input type=\"text\" class=\"custom-input\" [placeholder]=\"('SEARCH' | nxtCustomTranslate : 'Search...')\"\n              [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n              [value]=\"field.defaultValue ? field.defaultValue : ''\" />\n          </div>\n        </div>\n      </div>\n\n    </ng-container>\n  </div>\n</div>\n<!-- SKS13MAR25 popup conformation box -->\n<div class=\"dialog-overlay\" *ngIf=\"isSelectTablePopup\">\n  <div class=\"dialog-box\">\n    <button class=\"close-btn-fb\" (click)=\"onClose()\">\u2715</button>\n    <p>{{ 'ADD_TABLE_CONFIRMATION' | nxtCustomTranslate : 'These element want to add a table' }}</p>\n    <div class=\"button-container-fb\">\n      <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">{{ 'YES' | nxtCustomTranslate : 'Yes' }}</button>\n      <button class=\"no-btn-fb\" (click)=\"onClose()\">{{ 'NO' | nxtCustomTranslate : 'No' }}</button>\n    </div>\n  </div>\n</div>", styles: [".center-frame{display:flex;border-right-width:0}.head-elements{font-size:17px;font-weight:600}.form-builder{width:33.33%;height:calc(100vh - 20px);overflow-y:auto;background-color:#fff;padding:10px;border-right:10px solid #86A8CD;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;position:relative;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff;border-left:10px solid #234465}.form-builder .element:hover img{filter:invert(1)}.form-builder .element:hover .hover-label{color:#fff}.form-builder .element:hover .dot{background-color:#ffffffb3}.form-builder .element .drag-dots:active{cursor:grabbing}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .hover-label{font-size:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000;display:flex;justify-content:space-between;align-items:center}.form-builder .section-title:after{content:\"\\25bc\";font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.toggle-header:hover .arrow-icon{transform:scale(1.1)}.drag-dots{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);gap:3px;position:absolute;right:15px;top:50%;transform:translateY(-50%)}.dot{width:5px;height:5px;border-radius:50%;background-color:#cbd5e1;transition:background-color .3s ease}.drag-dot{height:10px;cursor:grab}.field-wrapper,.line-field{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.line-field{width:100%;margin:10px 0;padding:3px}.field-container{padding:0 5px;transition:background .2s}.field-container:hover .top-right,.field-container.highlight .top-right{opacity:1;visibility:visible}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.label-container:hover .delete-icon{opacity:1;visibility:visible}.label-container label{font-size:15px;font-weight:400}.top-right{display:flex;align-items:center;gap:3px;padding:3px;border-radius:3px;position:relative;top:-5px;margin:-10px -10px 0 0;background-color:#d7edff;opacity:0;visibility:hidden;transition:opacity .1s,visibility .1s}.custom-input,.custom-textarea,.dropdown{width:100%;padding:8px;border:1px solid #ccc;background-color:#fff;border-radius:5px;outline:none}.custom-input{border-color:#dddbda}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.custom-textarea{min-height:100px;resize:vertical}.dropdown{font-size:14px;color:#333;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-options-container,.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;border-radius:6px;outline:none;width:100%}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.form-preview{width:100%;height:fit-content;max-height:calc(100vh - 20px);overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px}.required:after{content:\" *\";color:red;margin-left:5px}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.delete-icon{width:15px;height:15px}.element.disabled{opacity:.5;cursor:not-allowed}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;flex-direction:column;padding:10px;border:1px dashed #ccc;border-radius:5px;background-color:#f9f9f9}.logo-preview{position:relative;border:1px solid #e0e0e0;background-color:#fff;overflow:hidden}.logo-upload-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:150px;height:150px;border:2px dashed #ccc;cursor:pointer}.logo-upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:#666}.logo-upload-label img{width:32px;height:32px;margin-bottom:8px}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.choose-icon-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:150px;border:2px dashed #ccc;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FormBuilderService }, { type: TranslationService }], propDecorators: { bookletJSON: [{
                 type: Input
             }], bookletId: [{