@rangertechnologies/ngnxt 2.1.213 → 2.1.215

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 (20) hide show
  1. package/esm2022/environments/version.mjs +2 -2
  2. package/esm2022/lib/components/datatable/datatable.component.mjs +57 -14
  3. package/esm2022/lib/nxt-app.module.mjs +22 -4
  4. package/esm2022/lib/pages/builder/element/element.component.mjs +1 -1
  5. package/esm2022/lib/pages/builder/properties/properties.component.mjs +3 -3
  6. package/esm2022/lib/pages/pdfDesigner/pdf-designer/pdf-designer.component.mjs +2 -2
  7. package/esm2022/lib/pages/pdfDesigner/pdf-properties/pdf-properties.component.mjs +3 -3
  8. package/esm2022/lib/pages/questionbook/questionbook.component.mjs +2 -2
  9. package/esm2022/lib/pages/questionnaire/questionnaire.component.mjs +2 -2
  10. package/esm2022/lib/pipe/custom-translate.pipe.mjs +27 -0
  11. package/esm2022/lib/services/translation.service.mjs +60 -0
  12. package/fesm2022/rangertechnologies-ngnxt.mjs +176 -38
  13. package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
  14. package/lib/components/datatable/datatable.component.d.ts +9 -3
  15. package/lib/nxt-app.module.d.ts +2 -0
  16. package/lib/pipe/custom-translate.pipe.d.ts +10 -0
  17. package/lib/services/translation.service.d.ts +17 -0
  18. package/package.json +1 -1
  19. package/rangertechnologies-ngnxt-2.1.215.tgz +0 -0
  20. package/rangertechnologies-ngnxt-2.1.213.tgz +0 -0
package/esm2022/lib/nxt-app.module.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
1
+ import { NgModule, CUSTOM_ELEMENTS_SCHEMA, APP_INITIALIZER } from '@angular/core';
2
2
  import { NxtAppComponent } from './nxt-app.component';
3
3
  import { QuestionnaireComponent } from './pages/questionnaire/questionnaire.component';
4
4
  import { CommonModule } from "@angular/common";
@@ -23,8 +23,12 @@ import { NxtInput } from './components/nxt-input/nxt-input.component';
23
23
  import { FormComponent } from './pages/builder/form/form.component';
24
24
  import { ListViewFilterComponent } from './components/list-view-filter/list-view-filter.component';
25
25
  import { NxtSearchBox } from './components/search-box/search-box.component';
26
+ import { TranslationService } from './services/translation.service';
26
27
  import * as i0 from "@angular/core";
27
28
  import * as i1 from "./i18n.module";
29
+ export function initializeApp(translationService) {
30
+ return () => translationService.load();
31
+ }
28
32
  // HA 19DEC23 variable created for translation
29
33
  const languages = [
30
34
  // { lang: 'EN', flag: 'assets/images/en.i18n.png', file: enI18n },
@@ -58,7 +62,14 @@ export class NxtAppModule {
58
62
  I18nService,
59
63
  I18nPipe,
60
64
  FormBuilderService, //AP 22JAN2025 Added the FormBuilderService
61
- PdfDesignerService
65
+ PdfDesignerService,
66
+ TranslationService,
67
+ {
68
+ provide: APP_INITIALIZER,
69
+ useFactory: initializeApp,
70
+ deps: [TranslationService],
71
+ multi: true
72
+ }
62
73
  ], imports: [CommonModule, FormsModule,
63
74
  NxtDatatable,
64
75
  NxtSearchBox,
@@ -108,8 +119,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
108
119
  I18nService,
109
120
  I18nPipe,
110
121
  FormBuilderService, //AP 22JAN2025 Added the FormBuilderService
111
- PdfDesignerService
122
+ PdfDesignerService,
123
+ TranslationService,
124
+ {
125
+ provide: APP_INITIALIZER,
126
+ useFactory: initializeApp,
127
+ deps: [TranslationService],
128
+ multi: true
129
+ }
112
130
  ]
113
131
  }]
114
132
  }] });
115
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnh0LWFwcC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvbnh0LWFwcC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxzQkFBc0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDdEQsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sK0NBQStDLENBQUM7QUFDdkYsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUU3QyxzQ0FBc0M7QUFDdEMsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDckUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sNkNBQTZDLENBQUM7QUFDcEYsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQUMxQyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDakQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQUN2QyxPQUFPLEtBQUssTUFBTSxNQUFNLFdBQVcsQ0FBQztBQUNwQyxPQUFPLEtBQUssTUFBTSxNQUFNLFdBQVcsQ0FBQztBQUNwQyxPQUFPLEtBQUssT0FBTyxNQUFNLFlBQVksQ0FBQTtBQUNyQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsMkNBQTJDO0FBQzNDLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUMxRSxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNyRSxPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSx5REFBeUQsQ0FBQztBQUMvRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSwwQ0FBMEMsQ0FBQztBQUM5RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDdEUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3BFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDBEQUEwRCxDQUFDO0FBQ25HLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSw4Q0FBOEMsQ0FBQzs7O0FBRTVFLDhDQUE4QztBQUM5QyxNQUFNLFNBQVMsR0FBRztJQUNoQixtRUFBbUU7SUFDbkUsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7SUFDNUIsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUU7SUFDOUIsRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUU7Q0FDN0IsQ0FBQTtBQXVDRCxNQUFNLE9BQU8sWUFBWTt3R0FBWixZQUFZO3lHQUFaLFlBQVksY0FuQlYsZUFBZSxrQkFqQmIsZUFBZTtZQUM1QixhQUFhLGFBR2IsWUFBWSxFQUFFLFdBQVc7WUFDekIsWUFBWTtZQUNaLFlBQVk7WUFDWix1QkFBdUI7WUFDdkIsUUFBUTtZQUNSLHNCQUFzQjtZQUN0QixnQkFBZ0I7WUFDaEIscUJBQXFCO1lBQ3JCLGtCQUFrQjtZQUNsQixvQkFBb0I7WUFDcEIsYUFBYSw0QkFLTCxlQUFlO1lBQ3ZCLHNCQUFzQjtZQUN0QixnQkFBZ0I7WUFDaEIsWUFBWTtZQUNaLFlBQVk7WUFDWix1QkFBdUI7WUFDdkIsUUFBUTtZQUNSLGtCQUFrQjtZQUNsQixvQkFBb0I7eUdBU1gsWUFBWSxhQVBaO1lBQ1QsV0FBVztZQUNYLFFBQVE7WUFDUixrQkFBa0IsRUFBQywyQ0FBMkM7WUFDOUQsa0JBQWtCO1NBQ25CLFlBOUJDLFlBQVksRUFBRSxXQUFXO1lBQ3pCLFlBQVk7WUFDWixZQUFZO1lBQ1osdUJBQXVCO1lBQ3ZCLFFBQVE7WUFDUixzQkFBc0I7WUFDdEIsZ0JBQWdCO1lBQ2hCLHFCQUFxQjtZQUNyQixrQkFBa0I7WUFDbEIsb0JBQW9CO1lBQ3BCLGFBQWE7WUFDYixVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQzs7NEZBcUJwQixZQUFZO2tCQXJDeEIsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxlQUFlO3dCQUM1QixhQUFhO3FCQUNkO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZLEVBQUUsV0FBVzt3QkFDekIsWUFBWTt3QkFDWixZQUFZO3dCQUNaLHVCQUF1Qjt3QkFDdkIsUUFBUTt3QkFDUixzQkFBc0I7d0JBQ3RCLGdCQUFnQjt3QkFDaEIscUJBQXFCO3dCQUNyQixrQkFBa0I7d0JBQ2xCLG9CQUFvQjt3QkFDcEIsYUFBYTt3QkFDYixVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQztxQkFDOUI7b0JBQ0QsU0FBUyxFQUFFLENBQUUsZUFBZSxDQUFFO29CQUM5QixPQUFPLEVBQUUsQ0FBQyxzQkFBc0IsQ0FBQztvQkFDakMsT0FBTyxFQUFFLENBQUMsZUFBZTt3QkFDdkIsc0JBQXNCO3dCQUN0QixnQkFBZ0I7d0JBQ2hCLFlBQVk7d0JBQ1osWUFBWTt3QkFDWix1QkFBdUI7d0JBQ3ZCLFFBQVE7d0JBQ1Isa0JBQWtCO3dCQUNsQixvQkFBb0I7cUJBQ3JCO29CQUNELFNBQVMsRUFBRTt3QkFDVCxXQUFXO3dCQUNYLFFBQVE7d0JBQ1Isa0JBQWtCLEVBQUMsMkNBQTJDO3dCQUM5RCxrQkFBa0I7cUJBQ25CO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUsIENVU1RPTV9FTEVNRU5UU19TQ0hFTUEgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE54dEFwcENvbXBvbmVudCB9IGZyb20gJy4vbnh0LWFwcC5jb21wb25lbnQnO1xuaW1wb3J0IHsgUXVlc3Rpb25uYWlyZUNvbXBvbmVudCB9IGZyb20gJy4vcGFnZXMvcXVlc3Rpb25uYWlyZS9xdWVzdGlvbm5haXJlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29tbW9uXCI7XG5pbXBvcnQgeyBGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7IFF1aWxsTW9kdWxlIH0gZnJvbSAnbmd4LXF1aWxsJztcbi8vIFZEIDIzSkFOMjQgcmVtb3ZlZCBIdHRwQ2xpZW50TW9kdWxlXG5pbXBvcnQgeyBCb29rbGV0Q29tcG9uZW50IH0gZnJvbSAnLi9wYWdlcy9ib29rbGV0L2Jvb2tsZXQuY29tcG9uZW50JztcbmltcG9ydCB7IFF1ZXN0aW9uYm9va0NvbXBvbmVudCB9IGZyb20gJy4vcGFnZXMvcXVlc3Rpb25ib29rL3F1ZXN0aW9uYm9vay5jb21wb25lbnQnO1xuaW1wb3J0IHsgSTE4bk1vZHVsZSB9IGZyb20gJy4vaTE4bi5tb2R1bGUnXG5pbXBvcnQgeyBJMThuQ29tcG9uZW50IH0gZnJvbSAnLi9pMThuLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJMThuUGlwZSB9IGZyb20gJy4vaTE4bi5waXBlJztcbmltcG9ydCAqIGFzIGVuSTE4biBmcm9tICcuL2VuLmkxOG4nO1xuaW1wb3J0ICogYXMgYXJJMThuIGZyb20gJy4vYXIuaTE4bic7XG5pbXBvcnQgKiBhcyB0YW1JMThuIGZyb20gJy4vdGFtLmkxOG4nXG5pbXBvcnQgeyBJMThuU2VydmljZSB9IGZyb20gJy4vaTE4bi5zZXJ2aWNlJztcbi8vQVAgMjJKQU4yMDI1IEFkZGVkIHRoZSBGb3JtQnVpbGRlclNlcnZpY2VcbmltcG9ydCB7IEZvcm1CdWlsZGVyU2VydmljZSB9IGZyb20gJy4vc2VydmljZXMvZm9ybS1idWlsZGVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgTnh0RGF0YXRhYmxlIH0gZnJvbSAnLi9jb21wb25lbnRzL2RhdGF0YWJsZS9kYXRhdGFibGUuY29tcG9uZW50JztcbmltcG9ydCB7IFBkZkRlc2lnbmVyU2VydmljZSB9IGZyb20gJy4vc2VydmljZXMvcGRmLWRlc2lnbmVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgUGRmRGVzaWduZXJDb21wb25lbnQgfSBmcm9tICcuL3BhZ2VzL3BkZkRlc2lnbmVyL3BkZi1kZXNpZ25lci9wZGYtZGVzaWduZXIuY29tcG9uZW50JztcbmltcG9ydCB7IE54dEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9idXR0b24vbnh0LWJ1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgTnh0SW5wdXQgfSBmcm9tICcuL2NvbXBvbmVudHMvbnh0LWlucHV0L254dC1pbnB1dC5jb21wb25lbnQnO1xuaW1wb3J0IHsgRm9ybUNvbXBvbmVudCB9IGZyb20gJy4vcGFnZXMvYnVpbGRlci9mb3JtL2Zvcm0uY29tcG9uZW50JztcbmltcG9ydCB7IExpc3RWaWV3RmlsdGVyQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2xpc3Qtdmlldy1maWx0ZXIvbGlzdC12aWV3LWZpbHRlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgTnh0U2VhcmNoQm94IH0gZnJvbSAnLi9jb21wb25lbnRzL3NlYXJjaC1ib3gvc2VhcmNoLWJveC5jb21wb25lbnQnO1xuIFxuLy8gSEEgMTlERUMyMyB2YXJpYWJsZSBjcmVhdGVkIGZvciB0cmFuc2xhdGlvblxuY29uc3QgbGFuZ3VhZ2VzID0gW1xuICAvLyB7IGxhbmc6ICdFTicsIGZsYWc6ICdhc3NldHMvaW1hZ2VzL2VuLmkxOG4ucG5nJywgZmlsZTogZW5JMThuIH0sXG4gIHsgbGFuZzogJ0VOJywgZmlsZTogZW5JMThuIH0sXG4gIHsgbGFuZzogJ1RBTScsIGZpbGU6IHRhbUkxOG4gfSxcbiAgeyBsYW5nOiAnQVInLCBmaWxlOiBhckkxOG4gfVxuXVxuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtOeHRBcHBDb21wb25lbnQsXG4gICAgSTE4bkNvbXBvbmVudFxuICBdLFxuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLCBGb3Jtc01vZHVsZSxcbiAgICBOeHREYXRhdGFibGUsXG4gICAgTnh0U2VhcmNoQm94LFxuICAgIExpc3RWaWV3RmlsdGVyQ29tcG9uZW50LFxuICAgIE54dElucHV0LFxuICAgIFF1ZXN0aW9ubmFpcmVDb21wb25lbnQsXG4gICAgQm9va2xldENvbXBvbmVudCxcbiAgICBRdWVzdGlvbmJvb2tDb21wb25lbnQsXG4gICAgTnh0QnV0dG9uQ29tcG9uZW50LFxuICAgIFBkZkRlc2lnbmVyQ29tcG9uZW50LFxuICAgIEZvcm1Db21wb25lbnQsXG4gICAgSTE4bk1vZHVsZS5mb3JSb290KGxhbmd1YWdlcylcbiAgXSxcbiAgYm9vdHN0cmFwOiBbIE54dEFwcENvbXBvbmVudCBdLFxuICBzY2hlbWFzOiBbQ1VTVE9NX0VMRU1FTlRTX1NDSEVNQV0sXG4gIGV4cG9ydHM6IFtOeHRBcHBDb21wb25lbnQsXG4gICAgUXVlc3Rpb25uYWlyZUNvbXBvbmVudCxcbiAgICBCb29rbGV0Q29tcG9uZW50LFxuICAgIE54dERhdGF0YWJsZSxcbiAgICBOeHRTZWFyY2hCb3gsXG4gICAgTGlzdFZpZXdGaWx0ZXJDb21wb25lbnQsXG4gICAgTnh0SW5wdXQsXG4gICAgTnh0QnV0dG9uQ29tcG9uZW50LFxuICAgIFBkZkRlc2lnbmVyQ29tcG9uZW50LFxuICBdLFxuICBwcm92aWRlcnM6IFtcbiAgICBJMThuU2VydmljZSxcbiAgICBJMThuUGlwZSxcbiAgICBGb3JtQnVpbGRlclNlcnZpY2UsLy9BUCAyMkpBTjIwMjUgQWRkZWQgdGhlIEZvcm1CdWlsZGVyU2VydmljZVxuICAgIFBkZkRlc2lnbmVyU2VydmljZVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIE54dEFwcE1vZHVsZSB7IH1cbiJdfQ==
133
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnh0LWFwcC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvbnh0LWFwcC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxzQkFBc0IsRUFBRSxlQUFlLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbEYsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLCtDQUErQyxDQUFDO0FBQ3ZGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFN0Msc0NBQXNDO0FBQ3RDLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLDZDQUE2QyxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUE7QUFDMUMsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ2pELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDdkMsT0FBTyxLQUFLLE1BQU0sTUFBTSxXQUFXLENBQUM7QUFDcEMsT0FBTyxLQUFLLE1BQU0sTUFBTSxXQUFXLENBQUM7QUFDcEMsT0FBTyxLQUFLLE9BQU8sTUFBTSxZQUFZLENBQUE7QUFDckMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzdDLDJDQUEyQztBQUMzQyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUNyRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDMUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0saUNBQWlDLENBQUM7QUFDckUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0seURBQXlELENBQUM7QUFDL0YsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDOUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBQ3RFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxxQ0FBcUMsQ0FBQztBQUNwRSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsTUFBTSwwREFBMEQsQ0FBQztBQUNuRyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sOENBQThDLENBQUM7QUFDNUUsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7OztBQUVwRSxNQUFNLFVBQVUsYUFBYSxDQUFDLGtCQUFzQztJQUNsRSxPQUFPLEdBQUcsRUFBRSxDQUFDLGtCQUFrQixDQUFDLElBQUksRUFBRSxDQUFDO0FBQ3pDLENBQUM7QUFFRCw4Q0FBOEM7QUFDOUMsTUFBTSxTQUFTLEdBQUc7SUFDaEIsbUVBQW1FO0lBQ25FLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFO0lBQzVCLEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUUsT0FBTyxFQUFFO0lBQzlCLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFO0NBQzdCLENBQUE7QUE4Q0QsTUFBTSxPQUFPLFlBQVk7d0dBQVosWUFBWTt5R0FBWixZQUFZLGNBMUJWLGVBQWUsa0JBakJiLGVBQWU7WUFDNUIsYUFBYSxhQUdiLFlBQVksRUFBRSxXQUFXO1lBQ3pCLFlBQVk7WUFDWixZQUFZO1lBQ1osdUJBQXVCO1lBQ3ZCLFFBQVE7WUFDUixzQkFBc0I7WUFDdEIsZ0JBQWdCO1lBQ2hCLHFCQUFxQjtZQUNyQixrQkFBa0I7WUFDbEIsb0JBQW9CO1lBQ3BCLGFBQWEsNEJBS0wsZUFBZTtZQUN2QixzQkFBc0I7WUFDdEIsZ0JBQWdCO1lBQ2hCLFlBQVk7WUFDWixZQUFZO1lBQ1osdUJBQXVCO1lBQ3ZCLFFBQVE7WUFDUixrQkFBa0I7WUFDbEIsb0JBQW9CO3lHQWdCWCxZQUFZLGFBZFo7WUFDVCxXQUFXO1lBQ1gsUUFBUTtZQUNSLGtCQUFrQixFQUFDLDJDQUEyQztZQUM5RCxrQkFBa0I7WUFDbEIsa0JBQWtCO1lBQ2xCO2dCQUNFLE9BQU8sRUFBRSxlQUFlO2dCQUN4QixVQUFVLEVBQUUsYUFBYTtnQkFDekIsSUFBSSxFQUFFLENBQUMsa0JBQWtCLENBQUM7Z0JBQzFCLEtBQUssRUFBRSxJQUFJO2FBQ1o7U0FDRixZQXJDQyxZQUFZLEVBQUUsV0FBVztZQUN6QixZQUFZO1lBQ1osWUFBWTtZQUNaLHVCQUF1QjtZQUN2QixRQUFRO1lBQ1Isc0JBQXNCO1lBQ3RCLGdCQUFnQjtZQUNoQixxQkFBcUI7WUFDckIsa0JBQWtCO1lBQ2xCLG9CQUFvQjtZQUNwQixhQUFhO1lBQ2IsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUM7OzRGQTRCcEIsWUFBWTtrQkE1Q3hCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFLENBQUMsZUFBZTt3QkFDNUIsYUFBYTtxQkFDZDtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsWUFBWSxFQUFFLFdBQVc7d0JBQ3pCLFlBQVk7d0JBQ1osWUFBWTt3QkFDWix1QkFBdUI7d0JBQ3ZCLFFBQVE7d0JBQ1Isc0JBQXNCO3dCQUN0QixnQkFBZ0I7d0JBQ2hCLHFCQUFxQjt3QkFDckIsa0JBQWtCO3dCQUNsQixvQkFBb0I7d0JBQ3BCLGFBQWE7d0JBQ2IsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUM7cUJBQzlCO29CQUNELFNBQVMsRUFBRSxDQUFFLGVBQWUsQ0FBRTtvQkFDOUIsT0FBTyxFQUFFLENBQUMsc0JBQXNCLENBQUM7b0JBQ2pDLE9BQU8sRUFBRSxDQUFDLGVBQWU7d0JBQ3ZCLHNCQUFzQjt3QkFDdEIsZ0JBQWdCO3dCQUNoQixZQUFZO3dCQUNaLFlBQVk7d0JBQ1osdUJBQXVCO3dCQUN2QixRQUFRO3dCQUNSLGtCQUFrQjt3QkFDbEIsb0JBQW9CO3FCQUNyQjtvQkFDRCxTQUFTLEVBQUU7d0JBQ1QsV0FBVzt3QkFDWCxRQUFRO3dCQUNSLGtCQUFrQixFQUFDLDJDQUEyQzt3QkFDOUQsa0JBQWtCO3dCQUNsQixrQkFBa0I7d0JBQ2xCOzRCQUNFLE9BQU8sRUFBRSxlQUFlOzRCQUN4QixVQUFVLEVBQUUsYUFBYTs0QkFDekIsSUFBSSxFQUFFLENBQUMsa0JBQWtCLENBQUM7NEJBQzFCLEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUsIENVU1RPTV9FTEVNRU5UU19TQ0hFTUEsIEFQUF9JTklUSUFMSVpFUiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTnh0QXBwQ29tcG9uZW50IH0gZnJvbSAnLi9ueHQtYXBwLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBRdWVzdGlvbm5haXJlQ29tcG9uZW50IH0gZnJvbSAnLi9wYWdlcy9xdWVzdGlvbm5haXJlL3F1ZXN0aW9ubmFpcmUuY29tcG9uZW50JztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gXCJAYW5ndWxhci9jb21tb25cIjtcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgUXVpbGxNb2R1bGUgfSBmcm9tICduZ3gtcXVpbGwnO1xuLy8gVkQgMjNKQU4yNCByZW1vdmVkIEh0dHBDbGllbnRNb2R1bGVcbmltcG9ydCB7IEJvb2tsZXRDb21wb25lbnQgfSBmcm9tICcuL3BhZ2VzL2Jvb2tsZXQvYm9va2xldC5jb21wb25lbnQnO1xuaW1wb3J0IHsgUXVlc3Rpb25ib29rQ29tcG9uZW50IH0gZnJvbSAnLi9wYWdlcy9xdWVzdGlvbmJvb2svcXVlc3Rpb25ib29rLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJMThuTW9kdWxlIH0gZnJvbSAnLi9pMThuLm1vZHVsZSdcbmltcG9ydCB7IEkxOG5Db21wb25lbnQgfSBmcm9tICcuL2kxOG4uY29tcG9uZW50JztcbmltcG9ydCB7IEkxOG5QaXBlIH0gZnJvbSAnLi9pMThuLnBpcGUnO1xuaW1wb3J0ICogYXMgZW5JMThuIGZyb20gJy4vZW4uaTE4bic7XG5pbXBvcnQgKiBhcyBhckkxOG4gZnJvbSAnLi9hci5pMThuJztcbmltcG9ydCAqIGFzIHRhbUkxOG4gZnJvbSAnLi90YW0uaTE4bidcbmltcG9ydCB7IEkxOG5TZXJ2aWNlIH0gZnJvbSAnLi9pMThuLnNlcnZpY2UnO1xuLy9BUCAyMkpBTjIwMjUgQWRkZWQgdGhlIEZvcm1CdWlsZGVyU2VydmljZVxuaW1wb3J0IHsgRm9ybUJ1aWxkZXJTZXJ2aWNlIH0gZnJvbSAnLi9zZXJ2aWNlcy9mb3JtLWJ1aWxkZXIuc2VydmljZSc7XG5pbXBvcnQgeyBOeHREYXRhdGFibGUgfSBmcm9tICcuL2NvbXBvbmVudHMvZGF0YXRhYmxlL2RhdGF0YWJsZS5jb21wb25lbnQnO1xuaW1wb3J0IHsgUGRmRGVzaWduZXJTZXJ2aWNlIH0gZnJvbSAnLi9zZXJ2aWNlcy9wZGYtZGVzaWduZXIuc2VydmljZSc7XG5pbXBvcnQgeyBQZGZEZXNpZ25lckNvbXBvbmVudCB9IGZyb20gJy4vcGFnZXMvcGRmRGVzaWduZXIvcGRmLWRlc2lnbmVyL3BkZi1kZXNpZ25lci5jb21wb25lbnQnO1xuaW1wb3J0IHsgTnh0QnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2J1dHRvbi9ueHQtYnV0dG9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOeHRJbnB1dCB9IGZyb20gJy4vY29tcG9uZW50cy9ueHQtaW5wdXQvbnh0LWlucHV0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGb3JtQ29tcG9uZW50IH0gZnJvbSAnLi9wYWdlcy9idWlsZGVyL2Zvcm0vZm9ybS5jb21wb25lbnQnO1xuaW1wb3J0IHsgTGlzdFZpZXdGaWx0ZXJDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvbGlzdC12aWV3LWZpbHRlci9saXN0LXZpZXctZmlsdGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOeHRTZWFyY2hCb3ggfSBmcm9tICcuL2NvbXBvbmVudHMvc2VhcmNoLWJveC9zZWFyY2gtYm94LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBUcmFuc2xhdGlvblNlcnZpY2UgfSBmcm9tICcuL3NlcnZpY2VzL3RyYW5zbGF0aW9uLnNlcnZpY2UnO1xuXG5leHBvcnQgZnVuY3Rpb24gaW5pdGlhbGl6ZUFwcCh0cmFuc2xhdGlvblNlcnZpY2U6IFRyYW5zbGF0aW9uU2VydmljZSkge1xuICByZXR1cm4gKCkgPT4gdHJhbnNsYXRpb25TZXJ2aWNlLmxvYWQoKTtcbn1cbiBcbi8vIEhBIDE5REVDMjMgdmFyaWFibGUgY3JlYXRlZCBmb3IgdHJhbnNsYXRpb25cbmNvbnN0IGxhbmd1YWdlcyA9IFtcbiAgLy8geyBsYW5nOiAnRU4nLCBmbGFnOiAnYXNzZXRzL2ltYWdlcy9lbi5pMThuLnBuZycsIGZpbGU6IGVuSTE4biB9LFxuICB7IGxhbmc6ICdFTicsIGZpbGU6IGVuSTE4biB9LFxuICB7IGxhbmc6ICdUQU0nLCBmaWxlOiB0YW1JMThuIH0sXG4gIHsgbGFuZzogJ0FSJywgZmlsZTogYXJJMThuIH1cbl1cblxuQE5nTW9kdWxlKHtcbiAgZGVjbGFyYXRpb25zOiBbTnh0QXBwQ29tcG9uZW50LFxuICAgIEkxOG5Db21wb25lbnRcbiAgXSxcbiAgaW1wb3J0czogW1xuICAgIENvbW1vbk1vZHVsZSwgRm9ybXNNb2R1bGUsXG4gICAgTnh0RGF0YXRhYmxlLFxuICAgIE54dFNlYXJjaEJveCxcbiAgICBMaXN0Vmlld0ZpbHRlckNvbXBvbmVudCxcbiAgICBOeHRJbnB1dCxcbiAgICBRdWVzdGlvbm5haXJlQ29tcG9uZW50LFxuICAgIEJvb2tsZXRDb21wb25lbnQsXG4gICAgUXVlc3Rpb25ib29rQ29tcG9uZW50LFxuICAgIE54dEJ1dHRvbkNvbXBvbmVudCxcbiAgICBQZGZEZXNpZ25lckNvbXBvbmVudCxcbiAgICBGb3JtQ29tcG9uZW50LFxuICAgIEkxOG5Nb2R1bGUuZm9yUm9vdChsYW5ndWFnZXMpXG4gIF0sXG4gIGJvb3RzdHJhcDogWyBOeHRBcHBDb21wb25lbnQgXSxcbiAgc2NoZW1hczogW0NVU1RPTV9FTEVNRU5UU19TQ0hFTUFdLFxuICBleHBvcnRzOiBbTnh0QXBwQ29tcG9uZW50LFxuICAgIFF1ZXN0aW9ubmFpcmVDb21wb25lbnQsXG4gICAgQm9va2xldENvbXBvbmVudCxcbiAgICBOeHREYXRhdGFibGUsXG4gICAgTnh0U2VhcmNoQm94LFxuICAgIExpc3RWaWV3RmlsdGVyQ29tcG9uZW50LFxuICAgIE54dElucHV0LFxuICAgIE54dEJ1dHRvbkNvbXBvbmVudCxcbiAgICBQZGZEZXNpZ25lckNvbXBvbmVudCxcbiAgXSxcbiAgcHJvdmlkZXJzOiBbXG4gICAgSTE4blNlcnZpY2UsXG4gICAgSTE4blBpcGUsXG4gICAgRm9ybUJ1aWxkZXJTZXJ2aWNlLC8vQVAgMjJKQU4yMDI1IEFkZGVkIHRoZSBGb3JtQnVpbGRlclNlcnZpY2VcbiAgICBQZGZEZXNpZ25lclNlcnZpY2UsXG4gICAgVHJhbnNsYXRpb25TZXJ2aWNlLFxuICAgIHtcbiAgICAgIHByb3ZpZGU6IEFQUF9JTklUSUFMSVpFUixcbiAgICAgIHVzZUZhY3Rvcnk6IGluaXRpYWxpemVBcHAsXG4gICAgICBkZXBzOiBbVHJhbnNsYXRpb25TZXJ2aWNlXSxcbiAgICAgIG11bHRpOiB0cnVlXG4gICAgfVxuICBdXG59KVxuZXhwb3J0IGNsYXNzIE54dEFwcE1vZHVsZSB7IH1cbiJdfQ==
package/esm2022/lib/pages/builder/element/element.component.mjs CHANGED
@@ -444,7 +444,7 @@ export class ElementComponent {
444
444
  });
445
445
  }
446
446
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: i1.FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
447
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, 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</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</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 class=\"field-container\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"padding: 10px;\">\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 </div>\n\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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' }}</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\" [placeholder]=\"field.question || 'Enter text'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : '' \" />\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]=\"getLineStyles(field)\" />\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]=\"getFontStyles(field)\">\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 : 'Upload Image' }}</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</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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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.isRequired\"></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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n ? field.questionText : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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.isRequired\">{{ field.questionText ? field.questionText : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : 'Select Date & Time'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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\"> {{ field.questionText ? field.questionText : '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\" [placeholder]=\"field.question || '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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\" [placeholder]=\"field.question || '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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=\"checkbox-field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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.value }}</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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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.value }}</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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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.value\n }} </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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : '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 (columnSelected)=columnSelected($event) (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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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...\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" [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>These element want to add a table</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">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%}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "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"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }] });
447
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, isStandalone: true, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, 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</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</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 class=\"field-container\"\n style=\"width: 100%;background-color: #EFF8FF; border: 1px solid #E6F3FF;display: flex;justify-content: center;margin-bottom:10px\"\n (click)=\"selectHeading('Header')\">\n <div class=\"label-container\" style=\"padding: 10px;\">\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 </div>\n\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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' }}</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\" [placeholder]=\"field.question || 'Enter text'\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"\n [value]=\"field.defaultValue ? field.defaultValue : '' \" />\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]=\"getLineStyles(field)\" />\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]=\"getFontStyles(field)\">\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 : 'Upload Image' }}</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</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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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.isRequired\"></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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{ field.questionText\n ? field.questionText : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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.isRequired\">{{ field.questionText ? field.questionText : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : 'Select Date & Time'\n }}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <input type=\"datetime-local\" class=\"custom-input\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n </div>\n\n <!-- Email -->\n <div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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\"> {{ field.questionText ? field.questionText : '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\" [placeholder]=\"field.question || '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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\" [placeholder]=\"field.question || '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : 'Enter your text'}}</label>\n </div>\n <div class=\"top-right\">\n <img src=\"../assets/icons/drag-dots.svg\" alt=\"Drag\" class=\"drag-dot\" />\n\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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=\"checkbox-field-container\" (click)=\"selectElement(i)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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.value }}</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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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.value }}</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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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.value\n }} </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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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.isRequired\" *ngIf=\"field.style?.showLabel !== false\">{{\n field.questionText ? field.questionText : '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 (columnSelected)=columnSelected($event) (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)\"\n [ngStyle]=\"getFontStyles(field)\" [class.highlight]=\"selectedFieldIndex === i\" draggable=\"true\"\n (dragstart)=\"onDragStart($event, i)\" (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 : '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...\" [readonly]=\"field.isReadOnly\"\n [class.hidden]=\"field.isHidden\" [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>These element want to add a table</p>\n <div class=\"button-container-fb\">\n <button class=\"yes-btn-fb\" (click)=\"addOnTable()\">Yes</button>\n <button class=\"no-btn-fb\" (click)=\"onClose()\">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%}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.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: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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", "dropdownDependentData", "labelValue", "token", "languageCode", "fieldRestrictions", "from", "apiUrl", "isEdit", "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"], outputs: ["tableRowClick", "onEditData", "saveButtonData", "onDeleteData", "buttonEmit", "hyperLinkEmit", "sideNavEmit", "actionButtonEmit", "columnSelected", "removeColumn", "valueChange", "selectedValues", "fileEmit", "NxtTableParamsEmit", "NxtTableFilterEmit", "NxtTableEmit"] }] });
448
448
  }
449
449
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
450
450
  type: Component,