@rangertechnologies/ngnxt 2.1.211 → 2.1.212

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 (14) hide show
  1. package/esm2022/environments/version.mjs +2 -2
  2. package/esm2022/lib/pages/builder/element/element.component.mjs +133 -146
  3. package/esm2022/lib/pages/builder/properties/common-fields.constants.mjs +68 -0
  4. package/esm2022/lib/pages/builder/properties/properties.component.mjs +91 -1117
  5. package/esm2022/lib/services/form-builder.service.mjs +11 -8
  6. package/fesm2022/rangertechnologies-ngnxt.mjs +297 -1267
  7. package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
  8. package/lib/pages/builder/element/element.component.d.ts +5 -4
  9. package/lib/pages/builder/properties/common-fields.constants.d.ts +79 -0
  10. package/lib/pages/builder/properties/properties.component.d.ts +105 -1395
  11. package/lib/services/form-builder.service.d.ts +1 -0
  12. package/package.json +1 -1
  13. package/rangertechnologies-ngnxt-2.1.212.tgz +0 -0
  14. package/rangertechnologies-ngnxt-2.1.211.tgz +0 -0
package/fesm2022/rangertechnologies-ngnxt.mjs CHANGED
@@ -60263,10 +60263,13 @@ class FormBuilderService {
60263
60263
  const savedFormElements = localStorage.getItem('formElements');
60264
60264
  if (savedFormElements) {
60265
60265
  this.formElements = JSON.parse(savedFormElements);
60266
- this.formElementsSubject.next([...this.formElements]);
60266
+ this.emitFormElements();
60267
60267
  // this.book = JSON.parse(localStorage.getItem('book') || '{}');
60268
60268
  }
60269
60269
  }
60270
+ emitFormElements() {
60271
+ this.formElementsSubject.next([...this.formElements]);
60272
+ }
60270
60273
  intializeBook(book) {
60271
60274
  // AP 13MAR25 - Get the unique id in the bookQuestionsMap
60272
60275
  this.unique_id = Object.keys(book.bookQuestionsMap)[0];
@@ -60362,7 +60365,7 @@ class FormBuilderService {
60362
60365
  // AP 26FEB25 - clear the form elements
60363
60366
  clearElements() {
60364
60367
  this.formElements = [];
60365
- this.formElementsSubject.next([...this.formElements]);
60368
+ this.emitFormElements();
60366
60369
  }
60367
60370
  // Get the element component reference
60368
60371
  getElementComponent() {
@@ -60378,7 +60381,7 @@ class FormBuilderService {
60378
60381
  }
60379
60382
  element['questionBookId'] = this.unique_id;
60380
60383
  this.formElements.push(element);
60381
- this.formElementsSubject.next([...this.formElements]);
60384
+ this.emitFormElements();
60382
60385
  }
60383
60386
  // SKS13MAR25 add table element
60384
60387
  addTableElement(element, ind) {
@@ -60440,7 +60443,7 @@ class FormBuilderService {
60440
60443
  if (elements[index]) {
60441
60444
  elements[index] = { ...elements[index], ...updates };
60442
60445
  this.formElements = elements;
60443
- this.formElementsSubject.next([...this.formElements]);
60446
+ this.emitFormElements();
60444
60447
  }
60445
60448
  }
60446
60449
  // Handle special cases
@@ -60451,7 +60454,7 @@ class FormBuilderService {
60451
60454
  updatedElement.questionText = updatedElement.questionText.slice(0, -2);
60452
60455
  }
60453
60456
  this.formElements[index] = updatedElement;
60454
- this.formElementsSubject.next([...this.formElements]);
60457
+ this.emitFormElements();
60455
60458
  // localStorage.setItem('formElements', JSON.stringify(this.formElements));
60456
60459
  }
60457
60460
  }
@@ -60508,7 +60511,7 @@ class FormBuilderService {
60508
60511
  this.formElements.forEach((element, index) => {
60509
60512
  element.questionNumber = index + 1;
60510
60513
  });
60511
- this.formElementsSubject.next([...this.formElements]);
60514
+ this.emitFormElements();
60512
60515
  }
60513
60516
  //AP-10MAR25 Returns the current book data
60514
60517
  getBook() {
@@ -60565,7 +60568,7 @@ class FormBuilderService {
60565
60568
  });
60566
60569
  this.formElements = this.tempElem;
60567
60570
  // localStorage.setItem('formElements', JSON.stringify(this.formElements));
60568
- this.formElementsSubject.next([...this.formElements]);
60571
+ this.emitFormElements();
60569
60572
  }
60570
60573
  // SKS19MAR25 update the element
60571
60574
  elementUpdate(index, element) {
@@ -61000,7 +61003,7 @@ const VERSION = {
61000
61003
  "semver": null,
61001
61004
  "suffix": "73e492bd-dirty",
61002
61005
  "semverString": null,
61003
- "version": "2.1.211"
61006
+ "version": "2.1.212"
61004
61007
  };
61005
61008
  /* tslint:enable */
61006
61009
 
@@ -63150,10 +63153,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
63150
63153
  type: Output
63151
63154
  }] } });
63152
63155
 
63156
+ //AP-25JUN25- common-fields.constants.ts
63157
+ const COMMON_ELEMENT_PROPS = [
63158
+ { label: 'Is Label', placeholder: 'Enter Text', type: 'checkbox', key: 'style.showLabel' },
63159
+ { key: 'primaryKey' },
63160
+ { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63161
+ { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
63162
+ { label: 'Element', type: 'number', key: 'questionNumber' },
63163
+ { label: 'Size', type: 'fieldSize', key: 'size' }
63164
+ ];
63165
+ const COMMON_FIELD_PROPS = [
63166
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63167
+ { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
63168
+ { label: 'Default Value', placeholder: 'Enter Text', type: 'text', key: 'defaultValue' },
63169
+ { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63170
+ {
63171
+ label: '', type: 'subQuestion', key: 'isSubText',
63172
+ subQuestion: [
63173
+ { label: 'End Point', placeholder: 'endpoint', type: 'text', key: 'subText.endpoint' },
63174
+ { label: 'Variable', placeholder: 'variable', type: 'text', key: 'subText.variable' },
63175
+ { label: 'Field', placeholder: 'field', type: 'text', key: 'subText.field' },
63176
+ { label: 'Default Field', placeholder: 'defaultField', type: 'text', key: 'subText.defaultField' },
63177
+ { label: 'Label Field', placeholder: 'labelField', type: 'text', key: 'subText.labelField' },
63178
+ { label: 'Value Field', placeholder: 'valueField', type: 'text', key: 'subText.valueField' },
63179
+ { label: 'Source Question Id', placeholder: 'sourceQuestionId', type: 'text', key: 'subText.sourceQuestionId' },
63180
+ { label: 'Dependent Value', placeholder: 'dependentValue', type: 'text', key: 'subText.dependentValue' },
63181
+ { label: 'Dependent Field', placeholder: 'isDependentField', type: 'boolean', key: 'subText.isDependentField' },
63182
+ { label: 'Query Field', placeholder: 'queryField', type: 'text', key: 'subText.queryField' },
63183
+ { label: 'Query Value', placeholder: 'queryValue', type: 'text', key: 'subText.queryValue' },
63184
+ { label: 'Query Value Ref', placeholder: 'queryValueRef', type: 'text', key: 'subText.queryValueReference' },
63185
+ { label: 'Unique Key', placeholder: 'uniqueKey', type: 'text', key: 'subText.uniqueKey' }
63186
+ ]
63187
+ }
63188
+ ];
63189
+ const COMMON_APPEARANCE_PROPS = [
63190
+ {
63191
+ label: 'Select Font', type: 'select', key: 'font', required: true,
63192
+ options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
63193
+ },
63194
+ { label: 'Font Color', type: 'color', key: 'fontColor', required: true },
63195
+ {
63196
+ label: 'Font Size', type: 'select', key: 'fontSize', required: true,
63197
+ options: [
63198
+ { label: 'Small', value: '12px' },
63199
+ { label: 'Medium', value: '14px' },
63200
+ { label: 'Large', value: '16px' }
63201
+ ]
63202
+ },
63203
+ {
63204
+ label: 'Font Width', type: 'select', key: 'fontWeight', required: true,
63205
+ options: [
63206
+ { value: '400', label: '400-Normal' },
63207
+ { value: '500', label: '500-Medium' },
63208
+ { value: '600', label: '600-Semi Bold' },
63209
+ { value: '700', label: '700-Bold' }
63210
+ ]
63211
+ },
63212
+ { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
63213
+ ];
63214
+ const COMMON_OPTIONS_FIELD = [
63215
+ {
63216
+ label: 'Options',
63217
+ type: 'options-type',
63218
+ key: 'options',
63219
+ addOptionLabel: 'Add Option',
63220
+ icon: 'plus'
63221
+ }
63222
+ ];
63223
+
63153
63224
  class PropertiesComponent {
63154
63225
  http;
63155
63226
  formBuilderService;
63156
63227
  templateService;
63228
+ createElementConfig(config) {
63229
+ return {
63230
+ elementProps: [...COMMON_ELEMENT_PROPS, ...(config?.customElementProps || [])],
63231
+ fieldProps: [...COMMON_FIELD_PROPS, ...(config?.customFieldProps || [])],
63232
+ appearance: [...COMMON_APPEARANCE_PROPS, ...(config?.customAppearanceProps || [])]
63233
+ };
63234
+ }
63157
63235
  formButtonHandler = new EventEmitter();
63158
63236
  templateSaveHandler = new EventEmitter();
63159
63237
  selectedOption = '';
@@ -63213,98 +63291,6 @@ class PropertiesComponent {
63213
63291
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'title' }
63214
63292
  ]
63215
63293
  },
63216
- 'Text': {
63217
- elementProps: [
63218
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
63219
- { key: 'primaryKey' },
63220
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63221
- { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
63222
- { label: 'Element', type: 'number', key: 'questionNumber' },
63223
- { label: 'Size', type: 'fieldSize', key: 'size' },
63224
- ],
63225
- fieldProps: [
63226
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63227
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
63228
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
63229
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63230
- {
63231
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63232
- "subQuestion": [
63233
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
63234
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
63235
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
63236
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
63237
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
63238
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
63239
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
63240
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
63241
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
63242
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
63243
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
63244
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63245
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
63246
- ]
63247
- }
63248
- ],
63249
- appearance: [
63250
- {
63251
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
63252
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
63253
- },
63254
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
63255
- {
63256
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
63257
- options: [
63258
- { label: 'Small', value: '12px' },
63259
- { label: 'Medium', value: '14px' },
63260
- { label: 'Large', value: '16px' }
63261
- ]
63262
- },
63263
- {
63264
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
63265
- options: [
63266
- { value: '400', label: '400-Normal' },
63267
- { value: '500', label: '500-Medium' },
63268
- { value: '600', label: '600-Semi Bold' },
63269
- { value: '700', label: '700-Bold' }
63270
- ]
63271
- },
63272
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
63273
- ]
63274
- },
63275
- 'Book': {
63276
- elementProps: [
63277
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
63278
- { key: 'primaryKey' },
63279
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63280
- { label: 'Element', type: 'number', key: 'questionNumber' },
63281
- { label: 'Size', type: 'fieldSize', key: 'size' }
63282
- ],
63283
- fieldProps: [
63284
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
63285
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
63286
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63287
- {
63288
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63289
- "subQuestion": [
63290
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
63291
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
63292
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
63293
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
63294
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
63295
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
63296
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
63297
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
63298
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
63299
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
63300
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
63301
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63302
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
63303
- ]
63304
- }
63305
- ],
63306
- appearance: []
63307
- },
63308
63294
  // AP-19MAR25 Add Line Property
63309
63295
  'Line': {
63310
63296
  elementProps: [
@@ -63325,58 +63311,30 @@ class PropertiesComponent {
63325
63311
  ],
63326
63312
  fieldProps: []
63327
63313
  },
63328
- 'Boolean': {
63329
- elementProps: [
63330
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63331
- { label: 'Element', type: 'number', key: 'questionNumber' },
63332
- { label: 'Size', type: 'fieldSize', key: 'size' },
63333
- ],
63334
- fieldProps: [
63335
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63336
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
63337
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'checkbox', key: 'defaultValue' },
63338
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63339
- {
63340
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63341
- "subQuestion": [
63342
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
63343
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
63344
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
63345
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
63346
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
63347
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
63348
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
63349
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
63350
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
63351
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
63352
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
63353
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63354
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
63355
- ]
63356
- }
63357
- ]
63358
- },
63359
- 'Checkbox': {
63360
- elementProps: [
63314
+ "Table": {
63315
+ "elementProps": [
63361
63316
  { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
63362
63317
  { key: 'primaryKey' },
63363
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63364
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
63365
- { label: 'Element', type: 'number', key: 'questionNumber' },
63366
- { label: 'Size', type: 'fieldSize', key: 'size' },
63318
+ { "label": "tableName", "placeholder": "Employee Details", "type": "text", "key": "questionText" },
63319
+ { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
63320
+ { "label": "tableScaleSize", "placeholder": "06 - Full Scale", "type": "text", "key": "tableScaleSize" },
63321
+ { "label": "isNosIndicator", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isNosIndicator" },
63322
+ { "label": "isPagination", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isPagination" },
63323
+ { "label": "addInlineRecord", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.addInlineRecord" },
63324
+ { "label": "actionButton", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.actionButton" },
63325
+ { "label": "searchBar", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.searchBar" },
63326
+ { "label": "isDeleteRow", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isDeleteRow" },
63327
+ { "label": "isEditRow", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isEditRow" },
63328
+ { "label": "isButtons", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isButtons" },
63329
+ { "label": "rowChoice", "placeholder": "", "type": "text", "key": "rowChoice" },
63330
+ { label: 'questionNumber', type: 'number', key: 'questionNumber' },
63331
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
63367
63332
  ],
63368
- fieldProps: [
63369
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63370
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
63371
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
63372
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63373
- {
63374
- label: 'Options',
63375
- type: 'checkbox',
63376
- key: 'options',
63377
- addOptionLabel: 'Add Option',
63378
- icon: 'plus'
63379
- },
63333
+ "fieldProps": [
63334
+ { "label": "tabelId", "placeholder": "Emp_Tabel_01", "type": "text", "key": "tabelId" },
63335
+ { "label": "helpText", "placeholder": "Enter message", "type": "text", "key": "helpText" },
63336
+ { "label": "defaultValue", "placeholder": "Default Value", "type": "text", "key": "defaultValue" },
63337
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63380
63338
  {
63381
63339
  "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63382
63340
  "subQuestion": [
@@ -63394,9 +63352,9 @@ class PropertiesComponent {
63394
63352
  { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63395
63353
  { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
63396
63354
  ]
63397
- }
63355
+ },
63398
63356
  ],
63399
- appearance: [
63357
+ "appearance": [
63400
63358
  {
63401
63359
  label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
63402
63360
  options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
@@ -63422,40 +63380,38 @@ class PropertiesComponent {
63422
63380
  { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
63423
63381
  ]
63424
63382
  },
63425
- 'Calendar': {
63426
- elementProps: [
63427
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
63428
- { key: 'primaryKey' },
63429
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63430
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
63431
- { label: 'Element', type: 'number', key: 'questionNumber' },
63432
- { label: 'Size', type: 'fieldSize', key: 'size' },
63433
- ],
63434
- fieldProps: [
63435
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63436
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
63437
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
63438
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63383
+ "TableColumn": {
63384
+ "elementProps": [
63385
+ { "label": "headerLabels", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "label" },
63386
+ { "label": "apiName", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "apiName" },
63439
63387
  {
63440
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63388
+ "label": "Summary Column", "placeholder": "Summary Column", "type": "subQuestion", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "summaryColumn",
63441
63389
  "subQuestion": [
63442
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
63443
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
63444
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
63445
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
63446
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
63447
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
63448
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
63449
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
63450
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
63451
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
63452
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
63453
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63454
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
63390
+ { "label": "Type", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "fldType" },
63391
+ { "label": "Operation", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operation" },
63392
+ { "label": "Operands", "placeholder": "Employee Details", "type": "array", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operands" },
63455
63393
  ]
63456
- }
63394
+ },
63395
+ {
63396
+ "label": "Summary Row", "placeholder": "Summary Row", "type": "subQuestion", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "summaryRow", "subQuestion": [
63397
+ { "label": "Type", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "fldType" },
63398
+ { "label": "operation", "placeholder": "operation", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operation" },
63399
+ { "label": "column", "placeholder": "Employee Details", "type": "radio", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "column" },
63400
+ { "label": "operands", "placeholder": "Employee Details", "type": "array", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operands" },
63401
+ ]
63402
+ },
63403
+ { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
63404
+ { "label": "tableScaleSize", "placeholder": "06 - Full Scale", "type": "text", "key": "tableScaleSize" },
63405
+ { "label": "rowChoice", "placeholder": "", "type": "text", "key": "rowChoice" },
63457
63406
  ],
63458
- appearance: [
63407
+ "fieldProps": [
63408
+ { "label": "tabelId", "placeholder": "Emp_Tabel_01", "type": "text", "key": "tabelId" },
63409
+ { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
63410
+ { "label": "helpText", "placeholder": "Enter help message here", "type": "text", "key": "helpText" },
63411
+ { "label": "defaultValue", "placeholder": "Default Value", "type": "text", "key": "defaultValue" },
63412
+ { "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
63413
+ ],
63414
+ "appearance": [
63459
63415
  {
63460
63416
  label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
63461
63417
  options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
@@ -63481,952 +63437,39 @@ class PropertiesComponent {
63481
63437
  { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
63482
63438
  ]
63483
63439
  },
63484
- // AP-12MAR25 - Added Date element Properties
63485
- 'Date': {
63486
- elementProps: [
63487
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
63488
- { key: 'primaryKey' },
63489
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63490
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
63491
- { label: 'Element', type: 'number', key: 'questionNumber' },
63492
- { label: 'Size', type: 'fieldSize', key: 'size' },
63493
- ],
63494
- fieldProps: [
63495
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63496
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
63497
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
63498
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63499
- {
63500
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63501
- "subQuestion": [
63502
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
63503
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
63504
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
63505
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
63506
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
63507
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
63508
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
63509
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
63510
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
63511
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
63512
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
63513
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63514
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
63515
- ]
63516
- }
63517
- ],
63518
- appearance: [
63519
- {
63520
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
63521
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
63522
- },
63523
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
63524
- {
63525
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
63526
- options: [
63527
- { label: 'Small', value: '12px' },
63528
- { label: 'Medium', value: '14px' },
63529
- { label: 'Large', value: '16px' }
63530
- ]
63531
- },
63532
- {
63533
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
63534
- options: [
63535
- { value: '400', label: '400-Normal' },
63536
- { value: '500', label: '500-Medium' },
63537
- { value: '600', label: '600-Semi Bold' },
63538
- { value: '700', label: '700-Bold' }
63539
- ]
63540
- },
63541
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
63542
- ]
63543
- },
63544
- // AP-21MAR25 - Add Time element Properties
63545
- 'Time': {
63546
- elementProps: [
63547
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
63548
- { key: 'primaryKey' },
63549
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63550
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
63551
- { label: 'Element', type: 'number', key: 'questionNumber' },
63552
- { label: 'Size', type: 'fieldSize', key: 'size' },
63553
- ],
63554
- fieldProps: [
63555
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63556
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
63557
- { label: 'Default Value', placeholder: 'Default Time', type: 'text', key: 'defaultValue' },
63558
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63559
- {
63560
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63561
- "subQuestion": [
63562
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
63563
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
63564
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
63565
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
63566
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
63567
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
63568
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
63569
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
63570
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
63571
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
63572
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
63573
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63574
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
63575
- ]
63576
- }
63577
- ],
63578
- appearance: [
63579
- {
63580
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Select font',
63581
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
63582
- },
63583
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '' },
63584
- {
63585
- label: 'Font Size', type: 'select', key: 'fontSize',
63586
- options: [
63587
- { label: 'Small', value: '12px' },
63588
- { label: 'Medium', value: '14px' },
63589
- { label: 'Large', value: '16px' }
63590
- ]
63591
- },
63592
- {
63593
- label: 'Font Width', type: 'select', key: 'fontWeight',
63594
- options: [
63595
- { value: '400', label: '400-Normal' },
63596
- { value: '500', label: '500-Medium' },
63597
- { value: '600', label: '600-Semi Bold' },
63598
- { value: '700', label: '700-Bold' }
63599
- ]
63600
- },
63601
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
63602
- ]
63603
- },
63604
- //AP-28MAR25 -Add DateTime Properties
63605
- 'DateTime': {
63606
- elementProps: [
63607
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
63608
- { key: 'primaryKey' },
63609
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63610
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
63611
- { label: 'Element', type: 'number', key: 'questionNumber' },
63612
- { label: 'Size', type: 'fieldSize', key: 'size' },
63613
- ],
63614
- fieldProps: [
63615
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63616
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
63617
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
63618
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63619
- {
63620
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63621
- "subQuestion": [
63622
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
63623
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
63624
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
63625
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
63626
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
63627
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
63628
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
63629
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
63630
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
63631
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
63632
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
63633
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63634
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" }
63635
- ]
63636
- }
63637
- ],
63638
- appearance: [
63639
- {
63640
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
63641
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
63642
- },
63643
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
63644
- {
63645
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
63646
- options: [
63647
- { label: 'Small', value: '12px' },
63648
- { label: 'Medium', value: '14px' },
63649
- { label: 'Large', value: '16px' }
63650
- ]
63651
- },
63652
- {
63653
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
63654
- options: [
63655
- { value: '400', label: '400-Normal' },
63656
- { value: '500', label: '500-Medium' },
63657
- { value: '600', label: '600-Semi Bold' },
63658
- { value: '700', label: '700-Bold' }
63659
- ]
63660
- },
63661
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
63662
- ]
63663
- },
63664
- 'Email': {
63665
- elementProps: [
63666
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
63667
- { key: 'primaryKey' },
63668
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63669
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
63670
- { label: 'Element', type: 'number', key: 'questionNumber' },
63671
- { label: 'Size', type: 'fieldSize', key: 'size' },
63672
- ],
63673
- fieldProps: [
63674
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63675
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
63676
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
63677
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63678
- {
63679
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63680
- "subQuestion": [
63681
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
63682
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
63683
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
63684
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
63685
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
63686
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
63687
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
63688
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
63689
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
63690
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
63691
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
63692
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63693
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
63694
- ]
63695
- }
63696
- ],
63697
- appearance: [
63698
- // { label: 'Select Font', type: 'select', key: 'fontFamily', placeholder: 'Left', required: true },
63699
- {
63700
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
63701
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
63702
- },
63703
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
63704
- {
63705
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
63706
- options: [
63707
- { label: 'Small', value: '12px' },
63708
- { label: 'Medium', value: '14px' },
63709
- { label: 'Large', value: '16px' }
63710
- ]
63711
- },
63712
- {
63713
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
63714
- options: [
63715
- { value: '400', label: '400-Normal' },
63716
- { value: '500', label: '500-Medium' },
63717
- { value: '600', label: '600-Semi Bold' },
63718
- { value: '700', label: '700-Bold' }
63719
- ]
63720
- },
63721
- // { label: 'Background Color', type: 'color', key: 'backgroundColor', defaultValue: '', required: true },
63722
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
63723
- ]
63724
- },
63725
- "Table": {
63726
- "elementProps": [
63727
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
63728
- { key: 'primaryKey' },
63729
- { "label": "tableName", "placeholder": "Employee Details", "type": "text", "key": "questionText" },
63730
- { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
63731
- { "label": "tableScaleSize", "placeholder": "06 - Full Scale", "type": "text", "key": "tableScaleSize" },
63732
- { "label": "isNosIndicator", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isNosIndicator" },
63733
- { "label": "isPagination", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isPagination" },
63734
- { "label": "addInlineRecord", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.addInlineRecord" },
63735
- { "label": "actionButton", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.actionButton" },
63736
- { "label": "searchBar", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.searchBar" },
63737
- { "label": "isDeleteRow", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isDeleteRow" },
63738
- { "label": "isEditRow", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isEditRow" },
63739
- { "label": "isButtons", "placeholder": "06 - Full Scale", "type": "checkbox", "key": "tableConfig.isButtons" },
63740
- { "label": "rowChoice", "placeholder": "", "type": "text", "key": "rowChoice" },
63741
- { label: 'questionNumber', type: 'number', key: 'questionNumber' },
63742
- { label: 'Field Size', type: 'fieldSize', key: 'size' },
63743
- ],
63744
- "fieldProps": [
63745
- { "label": "tabelId", "placeholder": "Emp_Tabel_01", "type": "text", "key": "tabelId" },
63746
- { "label": "helpText", "placeholder": "Enter message", "type": "text", "key": "helpText" },
63747
- { "label": "defaultValue", "placeholder": "Default Value", "type": "text", "key": "defaultValue" },
63748
- { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63749
- {
63750
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63751
- "subQuestion": [
63752
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
63753
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
63754
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
63755
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
63756
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
63757
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
63758
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
63759
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
63760
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
63761
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
63762
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
63763
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63764
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
63765
- ]
63766
- },
63767
- ],
63768
- "appearance": [
63769
- {
63770
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
63771
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
63772
- },
63773
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
63774
- {
63775
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
63776
- options: [
63777
- { label: 'Small', value: '12px' },
63778
- { label: 'Medium', value: '14px' },
63779
- { label: 'Large', value: '16px' }
63780
- ]
63781
- },
63782
- {
63783
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
63784
- options: [
63785
- { value: '400', label: '400-Normal' },
63786
- { value: '500', label: '500-Medium' },
63787
- { value: '600', label: '600-Semi Bold' },
63788
- { value: '700', label: '700-Bold' }
63789
- ]
63790
- },
63791
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
63792
- ]
63793
- },
63794
- "TableColumn": {
63795
- "elementProps": [
63796
- { "label": "headerLabels", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "label" },
63797
- { "label": "apiName", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "apiName" },
63798
- {
63799
- "label": "Summary Column", "placeholder": "Summary Column", "type": "subQuestion", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "summaryColumn",
63800
- "subQuestion": [
63801
- { "label": "Type", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "fldType" },
63802
- { "label": "Operation", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operation" },
63803
- { "label": "Operands", "placeholder": "Employee Details", "type": "array", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operands" },
63804
- ]
63805
- },
63806
- {
63807
- "label": "Summary Row", "placeholder": "Summary Row", "type": "subQuestion", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "summaryRow", "subQuestion": [
63808
- { "label": "Type", "placeholder": "Employee Details", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "fldType" },
63809
- { "label": "operation", "placeholder": "operation", "type": "text", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operation" },
63810
- { "label": "column", "placeholder": "Employee Details", "type": "radio", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "column" },
63811
- { "label": "operands", "placeholder": "Employee Details", "type": "array", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "operands" },
63812
- ]
63813
- },
63814
- { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
63815
- { "label": "tableScaleSize", "placeholder": "06 - Full Scale", "type": "text", "key": "tableScaleSize" },
63816
- { "label": "rowChoice", "placeholder": "", "type": "text", "key": "rowChoice" },
63817
- {
63818
- "label": "quickActionTools",
63819
- "type": "group",
63820
- "key": "quickActionTools",
63821
- "children": [
63822
- { "label": "edit", "type": "toggle", "key": "edit" },
63823
- { "label": "view", "type": "toggle", "key": "view" },
63824
- { "label": "delete", "type": "toggle", "key": "delete" }
63825
- ]
63826
- },
63827
- { "label": "addRecordEvent", "type": "toggle", "key": "addRecordEvent" },
63828
- {
63829
- "label": "tableScrollEventChoice",
63830
- "type": "group",
63831
- "key": "tableScrollEventChoice",
63832
- "children": [
63833
- { "label": "horizontal", "type": "toggle", "key": "horizontal" },
63834
- { "label": "vertical", "type": "toggle", "key": "vertical" }
63835
- ]
63836
- }
63837
- ],
63838
- "fieldProps": [
63839
- { "label": "tabelId", "placeholder": "Emp_Tabel_01", "type": "text", "key": "tabelId" },
63840
- { "label": "inputTextAlignment", "placeholder": "Left", "type": "text", "key": "inputTextAlignment" },
63841
- { "label": "requiredField", "type": "toggle", "key": "requiredField" },
63842
- { "label": "Read Only", "type": "checkbox", "targetArray": "fieldsMeta", "targetArrayKey": "uniqueIdentifier", "key": "edit" },
63843
- { "label": "hideLabel", "type": "toggle", "key": "hideLabel" },
63844
- { "label": "disabled", "type": "toggle", "key": "disabled" },
63845
- { "label": "hideElements", "type": "toggle", "key": "hideElements" },
63846
- { "label": "masking", "type": "toggle", "key": "masking" },
63847
- { "label": "helpText", "placeholder": "Enter help message here", "type": "text", "key": "helpText" },
63848
- { "label": "defaultValue", "placeholder": "Default Value", "type": "text", "key": "defaultValue" },
63849
- { "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
63850
- { "label": "controllingElements", "type": "toggle", "key": "controllingElements" },
63851
- { "label": "isDependence", "type": "toggle", "key": "isDependence" },
63852
- { "label": "newLine", "type": "toggle", "key": "newLine" }
63853
- ],
63854
- "appearance": [
63855
- { "label": "selectFont", "placeholder": "Left", "type": "text", "key": "selectFont" },
63856
- { "label": "fontColor", "placeholder": "#28343E", "type": "text", "key": "fontColor" },
63857
- { "label": "hexCode", "placeholder": "#28343E", "type": "text", "key": "hexCode" },
63858
- { "label": "fontSize", "placeholder": "300 - Medium", "type": "text", "key": "fontSize" },
63859
- { "label": "fontWidth", "placeholder": "Left", "type": "text", "key": "fontWidth" },
63860
- { "label": "backgroundColor", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundColor" },
63861
- { "label": "backgroundHexCode", "placeholder": "#E2E2E2", "type": "text", "key": "backgroundHexCode" },
63862
- { "label": "referenceAnchor", "placeholder": "http://source/rangernxt_bio_data/74/d.doc", "type": "text", "key": "referenceAnchor" },
63863
- { "label": "blankSpace", "type": "toggle", "key": "blankSpace" }
63864
- ]
63865
- },
63866
- 'File': {
63867
- elementProps: [
63868
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
63869
- { key: 'primaryKey' },
63870
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63871
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
63872
- { label: 'Element', type: 'number', key: 'questionNumber' },
63873
- { label: 'Size', type: 'fieldSize', key: 'size' },
63874
- { label: 'Default Value', type: 'text', key: 'defaultValue' }, ,
63875
- {
63876
- label: 'Support Type', type: 'select', key: 'supportType', options: [
63877
- { label: 'Images (JPEG, PNG, GIF)', value: 'image/*', extensions: ['.jpg', '.jpeg', '.png', '.gif'] },
63878
- { label: 'Audio (MP3, WAV, AIFF)', value: 'audio/*', extensions: ['.mp3', '.wav', '.aiff'] },
63879
- { label: 'Video (MP4, AVI, HEVC)', value: 'video/*', extensions: ['.mp4', '.avi', '.hevc'] },
63880
- { label: 'Documents (DOC, DOCX, PPT, PDF)', value: 'application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint', extensions: ['.doc', '.docx', '.ppt', '.pdf'] },
63881
- { label: 'Executables (EXE, BAD, SH)', value: 'application/x-msdownload,application/x-sh', extensions: ['.exe', '.bad', '.sh'] },
63882
- { label: 'Archives (ZIP, RAR, Git-hub)', value: 'application/zip,application/x-rar-compressed,application/x-git', extensions: ['.zip', '.rar', '.git'] }
63883
- ]
63884
- },
63885
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63886
- { label: 'Field Size', type: 'fieldSize', key: 'size' },
63887
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
63888
- ],
63889
- fieldProps: [
63890
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63891
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
63892
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
63893
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63894
- {
63895
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63896
- "subQuestion": [
63897
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
63898
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
63899
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
63900
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
63901
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
63902
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
63903
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
63904
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
63905
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
63906
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
63907
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
63908
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63909
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
63910
- ]
63911
- }
63912
- ],
63913
- appearance: [
63914
- // { label: 'Select Font', type: 'select', key: 'fontFamily', placeholder: 'Left', required: true },
63915
- {
63916
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
63917
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
63918
- },
63919
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
63920
- {
63921
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
63922
- options: [
63923
- { label: 'Small', value: '12px' },
63924
- { label: 'Medium', value: '14px' },
63925
- { label: 'Large', value: '16px' }
63926
- ]
63927
- },
63928
- {
63929
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
63930
- options: [
63931
- { value: '400', label: '400-Normal' },
63932
- { value: '500', label: '500-Medium' },
63933
- { value: '600', label: '600-Semi Bold' },
63934
- { value: '700', label: '700-Bold' }
63935
- ]
63936
- },
63937
- // { label: 'Background Color', type: 'color', key: 'backgroundColor', defaultValue: '', required: true },
63938
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
63939
- ]
63940
- },
63941
- 'List': {
63942
- elementProps: [
63943
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
63944
- { key: 'primaryKey' },
63945
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
63946
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
63947
- { label: 'Element', type: 'number', key: 'questionNumber' },
63948
- { label: 'Size', type: 'fieldSize', key: 'size' },
63949
- ],
63950
- fieldProps: [
63951
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
63952
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
63953
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
63954
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
63955
- {
63956
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
63957
- "subQuestion": [
63958
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
63959
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
63960
- { "label": "Field", "placeholder": "field", "type": "array", "key": "subText.field" },
63961
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
63962
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
63963
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
63964
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
63965
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
63966
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
63967
- { "label": "Is Static Data", "placeholder": "isStaticData", "type": "boolean", "key": "subText.isStaticData" },
63968
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
63969
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
63970
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
63971
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
63972
- ]
63973
- }
63974
- ],
63975
- appearance: [
63976
- // { label: 'Select Font', type: 'select', key: 'fontFamily', placeholder: 'Left', required: true },
63977
- {
63978
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
63979
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
63980
- },
63981
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
63982
- {
63983
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
63984
- options: [
63985
- { label: 'Small', value: '12px' },
63986
- { label: 'Medium', value: '14px' },
63987
- { label: 'Large', value: '16px' }
63988
- ]
63989
- },
63990
- {
63991
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
63992
- options: [
63993
- { value: '400', label: '400-Normal' },
63994
- { value: '500', label: '500-Medium' },
63995
- { value: '600', label: '600-Semi Bold' },
63996
- { value: '700', label: '700-Bold' }
63997
- ]
63998
- },
63999
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
64000
- ]
64001
- },
64002
- 'TextArea': {
64003
- elementProps: [
64004
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
64005
- { key: 'primaryKey' },
64006
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
64007
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
64008
- { label: 'Element', type: 'number', key: 'questionNumber' },
64009
- { label: 'Size', type: 'fieldSize', key: 'size' },
64010
- ],
64011
- fieldProps: [
64012
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
64013
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
64014
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
64015
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
64016
- {
64017
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
64018
- "subQuestion": [
64019
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
64020
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
64021
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
64022
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
64023
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
64024
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
64025
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
64026
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
64027
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
64028
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
64029
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
64030
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
64031
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
64032
- ]
64033
- }
64034
- ],
64035
- appearance: [
64036
- {
64037
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
64038
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
64039
- },
64040
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
64041
- {
64042
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
64043
- options: [
64044
- { label: 'Small', value: '12px' },
64045
- { label: 'Medium', value: '14px' },
64046
- { label: 'Large', value: '16px' }
64047
- ]
64048
- },
64049
- {
64050
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
64051
- options: [
64052
- { value: '400', label: '400-Normal' },
64053
- { value: '500', label: '500-Medium' },
64054
- { value: '600', label: '600-Semi Bold' },
64055
- { value: '700', label: '700-Bold' }
64056
- ]
64057
- },
64058
- // { label: 'Background Color', type: 'color', key: 'backgroundColor', defaultValue: '', required: true },
64059
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
64060
- ]
64061
- },
64062
- 'RichTextArea': {
64063
- elementProps: [
64064
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
64065
- { key: 'primaryKey' },
64066
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
64067
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
64068
- { label: 'Element', type: 'number', key: 'questionNumber' },
64069
- { label: 'Size', type: 'fieldSize', key: 'size' },
64070
- ],
64071
- fieldProps: [
64072
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
64073
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
64074
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
64075
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
64076
- {
64077
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
64078
- "subQuestion": [
64079
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
64080
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
64081
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
64082
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
64083
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
64084
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
64085
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
64086
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
64087
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
64088
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
64089
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
64090
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
64091
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
64092
- ]
64093
- }
64094
- ],
64095
- appearance: [
64096
- {
64097
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
64098
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
64099
- },
64100
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
64101
- {
64102
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
64103
- options: [
64104
- { label: 'Small', value: '12px' },
64105
- { label: 'Medium', value: '14px' },
64106
- { label: 'Large', value: '16px' }
64107
- ]
64108
- },
64109
- {
64110
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
64111
- options: [
64112
- { value: '400', label: '400-Normal' },
64113
- { value: '500', label: '500-Medium' },
64114
- { value: '600', label: '600-Semi Bold' },
64115
- { value: '700', label: '700-Bold' }
64116
- ]
64117
- },
64118
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
64119
- ]
64120
- },
64121
- 'Number': {
64122
- elementProps: [
64123
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
64124
- { key: 'primaryKey' },
64125
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
64126
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
64127
- { label: 'Element', type: 'number', key: 'questionNumber' },
64128
- { label: 'Size', type: 'fieldSize', key: 'size' },
64129
- ],
64130
- fieldProps: [
64131
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
64132
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
64133
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
64134
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
64135
- {
64136
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
64137
- "subQuestion": [
64138
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
64139
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
64140
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
64141
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
64142
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
64143
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
64144
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
64145
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
64146
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
64147
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
64148
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
64149
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
64150
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
64151
- ]
64152
- }
64153
- ],
64154
- appearance: [
64155
- {
64156
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
64157
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
64158
- },
64159
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
64160
- {
64161
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
64162
- options: [
64163
- { label: 'Small', value: '12px' },
64164
- { label: 'Medium', value: '14px' },
64165
- { label: 'Large', value: '16px' }
64166
- ]
64167
- },
64168
- {
64169
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
64170
- options: [
64171
- { value: '400', label: '400-Normal' },
64172
- { value: '500', label: '500-Medium' },
64173
- { value: '600', label: '600-Semi Bold' },
64174
- { value: '700', label: '700-Bold' }
64175
- ]
64176
- },
64177
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
64178
- ]
64179
- },
64180
- 'Dropdown': {
64181
- elementProps: [
64182
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
64183
- { key: 'primaryKey' },
64184
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
64185
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
64186
- { label: 'Element', type: 'number', key: 'questionNumber' },
64187
- { label: 'Size', type: 'fieldSize', key: 'size' },
64188
- ],
64189
- fieldProps: [
64190
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
64191
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
64192
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
64193
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
64194
- {
64195
- label: 'Options',
64196
- type: 'dropdown',
64197
- key: 'options',
64198
- addOptionLabel: 'Add Variant',
64199
- icon: 'plus'
64200
- },
64201
- {
64202
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
64203
- "subQuestion": [
64204
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
64205
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
64206
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
64207
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
64208
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
64209
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
64210
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
64211
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
64212
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
64213
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
64214
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
64215
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
64216
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
64217
- ]
64218
- }
64219
- ],
64220
- appearance: [
64221
- {
64222
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
64223
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
64224
- },
64225
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
64226
- {
64227
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
64228
- options: [
64229
- { label: 'Small', value: '12px' },
64230
- { label: 'Medium', value: '14px' },
64231
- { label: 'Large', value: '16px' }
64232
- ]
64233
- },
64234
- {
64235
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
64236
- options: [
64237
- { value: '400', label: '400-Normal' },
64238
- { value: '500', label: '500-Medium' },
64239
- { value: '600', label: '600-Semi Bold' },
64240
- { value: '700', label: '700-Bold' }
64241
- ]
64242
- },
64243
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
64244
- ]
64245
- },
64246
- 'Image': {
64247
- elementProps: [
64248
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
64249
- { key: 'primaryKey' },
64250
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
64251
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
64252
- { label: 'Element', type: 'number', key: 'questionNumber' },
64253
- { label: 'Size', type: 'fieldSize', key: 'size' },
64254
- ],
64255
- fieldProps: [
64256
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
64257
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
64258
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
64259
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
64260
- {
64261
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
64262
- "subQuestion": [
64263
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
64264
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
64265
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
64266
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
64267
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
64268
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
64269
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
64270
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
64271
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
64272
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
64273
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
64274
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
64275
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
64276
- ]
64277
- }
64278
- ],
64279
- appearance: [
64280
- {
64281
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
64282
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
64283
- },
64284
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
64285
- {
64286
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
64287
- options: [
64288
- { label: 'Small', value: '12px' },
64289
- { label: 'Medium', value: '14px' },
64290
- { label: 'Large', value: '16px' }
64291
- ]
64292
- },
64293
- {
64294
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
64295
- options: [
64296
- { value: '400', label: '400-Normal' },
64297
- { value: '500', label: '500-Medium' },
64298
- { value: '600', label: '600-Semi Bold' },
64299
- { value: '700', label: '700-Bold' }
64300
- ]
64301
- },
64302
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
64303
- ]
64304
- },
64305
- 'Radio': {
64306
- elementProps: [
64307
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
64308
- { key: 'primaryKey' },
64309
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
64310
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
64311
- { label: 'Element', type: 'number', key: 'questionNumber' },
64312
- { label: 'Size', type: 'fieldSize', key: 'size' },
64313
- ],
64314
- fieldProps: [
64315
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
64316
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
64317
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
64318
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
64319
- {
64320
- label: 'Options',
64321
- type: 'radio',
64322
- key: 'options',
64323
- addOptionLabel: 'Add Option',
64324
- icon: 'plus'
64325
- },
64326
- {
64327
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
64328
- "subQuestion": [
64329
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
64330
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
64331
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
64332
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
64333
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
64334
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
64335
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
64336
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
64337
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
64338
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
64339
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
64340
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
64341
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
64342
- ]
64343
- }
64344
- ],
64345
- appearance: [
64346
- {
64347
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
64348
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
64349
- },
64350
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
64351
- {
64352
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
64353
- options: [
64354
- { label: 'Small', value: '12px' },
64355
- { label: 'Medium', value: '14px' },
64356
- { label: 'Large', value: '16px' }
64357
- ]
64358
- },
64359
- {
64360
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
64361
- options: [
64362
- { value: '400', label: '400-Normal' },
64363
- { value: '500', label: '500-Medium' },
64364
- { value: '600', label: '600-Semi Bold' },
64365
- { value: '700', label: '700-Bold' }
64366
- ]
64367
- },
64368
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
64369
- ]
64370
- },
64371
- 'Label': {
64372
- elementProps: [
64373
- { label: 'Is Label', placeholder: 'Enter Text ', type: 'checkbox', key: 'style.showLabel' },
64374
- { key: 'primaryKey' },
64375
- { label: 'Label', placeholder: 'Field label', type: 'text', key: 'questionText' },
64376
- { label: 'Place Holder', placeholder: 'Field placeholder', type: 'text', key: 'question' },
64377
- { label: 'Element', type: 'number', key: 'questionNumber' },
64378
- { label: 'Size', type: 'fieldSize', key: 'size' },
64379
- ],
64380
- fieldProps: [
64381
- { label: '', type: 'toggleGroup', key: 'toggleOptions' },
64382
- { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
64383
- { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
64384
- { label: 'Reference Field', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
64385
- {
64386
- "label": "", "placeholder": "Enter Text", "type": "subQuestion", "key": "isSubText",
64387
- "subQuestion": [
64388
- { "label": "End Point", "placeholder": "endpoint", "type": "text", "key": "subText.endpoint" },
64389
- { "label": "Variable", "placeholder": "variable", "type": "text", "key": "subText.variable" },
64390
- { "label": "Field", "placeholder": "field", "type": "text", "key": "subText.field" },
64391
- { "label": "Default Field", "placeholder": "defaultField", "type": "text", "key": "subText.defaultField" },
64392
- { "label": "Label Field", "placeholder": "labelField", "type": "text", "key": "subText.labelField" },
64393
- { "label": "Value Field", "placeholder": "valueField", "type": "text", "key": "subText.valueField" },
64394
- { "label": "Source Question Id", "placeholder": "sourceQuestionId", "type": "text", "key": "subText.sourceQuestionId" },
64395
- { "label": "Dependent Value", "placeholder": "dependentValue", "type": "text", "key": "subText.dependentValue" },
64396
- { "label": "Dependent Field", "placeholder": "isDependentField", "type": "boolean", "key": "subText.isDependentField" },
64397
- { "label": "Query Field", "placeholder": "queryField", "type": "text", "key": "subText.queryField" },
64398
- { "label": "Query Value", "placeholder": "queryValue", "type": "text", "key": "subText.queryValue" },
64399
- { "label": "Query Value Ref", "placeholder": "queryValueRef", "type": "text", "key": "subText.queryValueReference" },
64400
- { "label": "Unique Key", "placeholder": "uniqueKey", "type": "text", "key": "subText.uniqueKey" },
64401
- ]
64402
- }
64403
- ],
64404
- appearance: [
64405
- {
64406
- label: 'Select Font', type: 'select', key: 'font', placeholder: 'Left', required: true,
64407
- options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto']
64408
- },
64409
- { label: 'Font Color', type: 'color', key: 'fontColor', defaultValue: '', required: true },
64410
- {
64411
- label: 'Font Size', type: 'select', key: 'fontSize', defaultValue: '', required: true,
64412
- options: [
64413
- { label: 'Small', value: '12px' },
64414
- { label: 'Medium', value: '14px' },
64415
- { label: 'Large', value: '16px' }
64416
- ]
64417
- },
64418
- {
64419
- label: 'Font Width', type: 'select', key: 'fontWeight', defaultValue: '', required: true,
64420
- options: [
64421
- { value: '400', label: '400-Normal' },
64422
- { value: '500', label: '500-Medium' },
64423
- { value: '600', label: '600-Semi Bold' },
64424
- { value: '700', label: '700-Bold' }
64425
- ]
64426
- },
64427
- { label: 'Duplicate Field', type: 'button-toggle', key: 'duplicateField', defaultValue: false }
64428
- ]
64429
- }
63440
+ Checkbox: this.createElementConfig({
63441
+ customFieldProps: COMMON_OPTIONS_FIELD.map(opt => ({
63442
+ ...opt,
63443
+ type: 'checkbox'
63444
+ }))
63445
+ }),
63446
+ Dropdown: this.createElementConfig({
63447
+ customFieldProps: COMMON_OPTIONS_FIELD.map(opt => ({
63448
+ ...opt,
63449
+ type: 'dropdown'
63450
+ }))
63451
+ }),
63452
+ Radio: this.createElementConfig({
63453
+ customFieldProps: COMMON_OPTIONS_FIELD.map(opt => ({
63454
+ ...opt,
63455
+ type: 'checkbox'
63456
+ }))
63457
+ }),
63458
+ Text: this.createElementConfig(),
63459
+ Calendar: this.createElementConfig(),
63460
+ Date: this.createElementConfig(),
63461
+ Time: this.createElementConfig(),
63462
+ DateTime: this.createElementConfig(),
63463
+ Email: this.createElementConfig(),
63464
+ Book: this.createElementConfig(),
63465
+ List: this.createElementConfig(),
63466
+ TextArea: this.createElementConfig(),
63467
+ RichTextArea: this.createElementConfig(),
63468
+ Number: this.createElementConfig(),
63469
+ Image: this.createElementConfig(),
63470
+ Label: this.createElementConfig(),
63471
+ Boolean: this.createElementConfig(),
63472
+ File: this.createElementConfig(),
64430
63473
  };
64431
63474
  constructor(http, formBuilderService, templateService) {
64432
63475
  this.http = http;
@@ -65048,11 +64091,11 @@ class PropertiesComponent {
65048
64091
  this.draggedId = null;
65049
64092
  }
65050
64093
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1.HttpClient }, { token: FormBuilderService }, { token: TemplateService }], target: i0.ɵɵFactoryTarget.Component });
65051
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, isStandalone: true, selector: "app-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n Attributes\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n Property\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n Appearance\n </div>\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- AP-06MAR25 Select element type show -->\n <div *ngIf=\"getProperties()\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'Image'\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search book specific for book element -->\n <div *ngIf=\"selectedElement?.type === 'Book'\">\n <label class=\"text-sm\">Search Book</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>Endpoint:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>Variable:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>Field:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>Default Field:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- help text -->\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n selectedElement.helpText }}</div>\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\">Select file category</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n </div>\n\n <!--AP-11JUN25 - Show this section only if the property key is 'primaryKey' -->\n <div *ngIf=\"prop.key === 'primaryKey'\">\n <input type=\"checkbox\" [checked]=\"getValueByPath('primaryKey')\" [disabled]=\"!getValueByPath('primaryKey') && isAnotherIdSelected()\" (change)=\"onToggleChange('primaryKey', $event)\"/>\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">primaryKey</span>\n </div>\n\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n <div *ngIf=\"prop.key === 'size'\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n class=\"size-input\" />\n </div>\n\n <!-- AP-19MAR25 Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n\n </div>\n \n <!-- AP 23MAY25 - Action Button -->\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ Add Button</button>\n </div>\n \n <div *ngFor=\"let btn of book?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>Button Name</label>\n <input type=\"text\" [(ngModel)]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event)\" placeholder=\"Enter button name\">\n </div>\n \n <div class=\"form-group\">\n <label>Event Name</label>\n <input type=\"text\" [(ngModel)]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n \n <div class=\"form-group\">\n <label>Alt</label>\n <input type=\"text\" [(ngModel)]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n \n <div class=\"form-group\">\n <label>Endpoint</label>\n <input type=\"text\" [(ngModel)]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n \n <div class=\"form-group\">\n <label>Method</label>\n <select [(ngModel)]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option [value]=\"'GET'\">GET</option>\n <option [value]=\"'POST'\">POST</option>\n <option [value]=\"'PUT'\">PUT</option>\n <option [value]=\"'DELETE'\">DELETE</option>\n </select>\n </div>\n \n <!-- AP 23MAY25 - Action Style Fields -->\n <div class=\"form-group\">\n <label>Background Color</label>\n <input type=\"color\" [(ngModel)]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n \n <div class=\"form-group\">\n <label>Border Radius</label>\n <input type=\"range\" min=\"0\" max=\"50\" [(ngModel)]=\"btn.borderRadius\" \n (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div> \n \n <div class=\"form-group\">\n <label>Button Width (px)</label>\n <input type=\"number\" [(ngModel)]=\"btn.width\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n \n <div class=\"form-group\">\n <label>Text Color</label>\n <input type=\"color\" [(ngModel)]=\"btn.textColor\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n \n <div class=\"form-group\">\n <label>Position (%)</label>\n <input type=\"range\" min=\"0\" max=\"100\" [(ngModel)]=\"btn.positionPercent\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 Remove</button>\n </div>\n </div>\n \n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID -->\n <div *ngIf=\"getProperties()\">\n <label>Label Id</label>\n <div\n style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n (change)=\"onRequiredChange($event.target.checked)\" />\n Required\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n (change)=\"onToggleChange('isReadOnly', $event)\" />\n Read Only\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n (change)=\"onToggleChange('isHidden', $event)\" />\n Is Hide\n </label>\n </div>\n </div>\n\n <!-- AP 28FEB25 - handled options with UUID -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n\n </div>\n </ng-container>\n\n <!-- SKS21MAR25 Move Style Outside the Loop -->\n <!-- Style Toggle -->\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">Style</div>\n <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n </div>\n </div>\n </div>\n\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <!-- Font Selection -->\n <div *ngIf=\"prop.key === 'font'\">\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n (change)=\"setValueByPath('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Font Size Selection -->\n <div *ngIf=\"prop.key === 'fontSize'\">\n <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n </div>\n <!-- Font Weight Selection -->\n <div *ngIf=\"prop.key === 'fontWeight'\">\n <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n </div>\n\n <div class=\"flex-container\">\n <!-- Dropdown Box -->\n <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n (change)=\"setValueByPath('fontColor', $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n </div>\n </div>\n \n <!-- AP-17APR25 Button for Duplicate Field -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement)\">\n Add Duplicate\n </button>\n</div>\n\n\n </div>\n </ng-container>\n </div>\n </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{margin-left:10px;cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.add-button{padding:8px 14px;background-color:#0954c5;color:#fff;border:none;border-radius:8px;cursor:pointer}.add-button:hover{background-color:#0954c5}.button-config-card{background-color:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.form-group{margin-bottom:12px}.form-group label{display:block;font-weight:600;margin-bottom:6px}.form-group input,.form-group select{padding:8px 10px;border:1px solid #ccc;border-radius:6px}.remove-button{background-color:#e74c3c;color:#fff;border:none;padding:6px 12px;margin-top:10px;border-radius:6px;cursor:pointer}.remove-button:hover{background-color:#c0392b}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "filterName"], outputs: ["searchValueChange"] }] });
64094
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, isStandalone: true, selector: "app-properties", inputs: { selectedElementType: "selectedElementType", templateSelected: "templateSelected" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n Attributes\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n Property\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n Appearance\n </div>\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- AP-06MAR25 Select element type show -->\n <div *ngIf=\"getProperties()\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'Image'\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search book specific for book element -->\n <div *ngIf=\"selectedElement?.type === 'Book'\">\n <label class=\"text-sm\">Search Book</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>Endpoint:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>Variable:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>Field:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>Default Field:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- help text -->\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n selectedElement.helpText }}</div>\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\">Select file category</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n </div>\n\n <!--AP-11JUN25 - Show this section only if the property key is 'primaryKey' -->\n <div *ngIf=\"prop.key === 'primaryKey'\">\n <input type=\"checkbox\" [checked]=\"getValueByPath('primaryKey')\" [disabled]=\"!getValueByPath('primaryKey') && isAnotherIdSelected()\" (change)=\"onToggleChange('primaryKey', $event)\"/>\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">primaryKey</span>\n </div>\n\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n <div *ngIf=\"prop.key === 'size'\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n class=\"size-input\" />\n </div>\n\n <!-- AP-19MAR25 Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n\n </div>\n \n <!-- AP 23MAY25 - Action Button -->\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ Add Button</button>\n </div>\n \n <div *ngFor=\"let btn of book?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>Button Name</label>\n <input type=\"text\" [(ngModel)]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event)\" placeholder=\"Enter button name\">\n </div>\n \n <div class=\"form-group\">\n <label>Event Name</label>\n <input type=\"text\" [(ngModel)]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n \n <div class=\"form-group\">\n <label>Alt</label>\n <input type=\"text\" [(ngModel)]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n \n <div class=\"form-group\">\n <label>Endpoint</label>\n <input type=\"text\" [(ngModel)]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n \n <div class=\"form-group\">\n <label>Method</label>\n <select [(ngModel)]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option [value]=\"'GET'\">GET</option>\n <option [value]=\"'POST'\">POST</option>\n <option [value]=\"'PUT'\">PUT</option>\n <option [value]=\"'DELETE'\">DELETE</option>\n </select>\n </div>\n \n <!-- AP 23MAY25 - Action Style Fields -->\n <div class=\"form-group\">\n <label>Background Color</label>\n <input type=\"color\" [(ngModel)]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n \n <div class=\"form-group\">\n <label>Border Radius</label>\n <input type=\"range\" min=\"0\" max=\"50\" [(ngModel)]=\"btn.borderRadius\" \n (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div> \n \n <div class=\"form-group\">\n <label>Button Width (px)</label>\n <input type=\"number\" [(ngModel)]=\"btn.width\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n \n <div class=\"form-group\">\n <label>Text Color</label>\n <input type=\"color\" [(ngModel)]=\"btn.textColor\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n \n <div class=\"form-group\">\n <label>Position (%)</label>\n <input type=\"range\" min=\"0\" max=\"100\" [(ngModel)]=\"btn.positionPercent\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 Remove</button>\n </div>\n </div>\n \n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID -->\n <div *ngIf=\"getProperties()\">\n <label>Label Id</label>\n <div\n style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n (change)=\"onRequiredChange($event.target.checked)\" />\n Required\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n (change)=\"onToggleChange('isReadOnly', $event)\" />\n Read Only\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n (change)=\"onToggleChange('isHidden', $event)\" />\n Is Hide\n </label>\n </div>\n </div>\n\n <!-- AP 28FEB25 - handled options with UUID -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n\n </div>\n </ng-container>\n\n <!-- SKS21MAR25 Move Style Outside the Loop -->\n <!-- Style Toggle -->\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">Style</div>\n <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n </div>\n </div>\n </div>\n\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <!-- Font Selection -->\n <div *ngIf=\"prop.key === 'font'\">\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n (change)=\"setValueByPath('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Font Size Selection -->\n <div *ngIf=\"prop.key === 'fontSize'\">\n <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n </div>\n <!-- Font Weight Selection -->\n <div *ngIf=\"prop.key === 'fontWeight'\">\n <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n </div>\n\n <div class=\"flex-container\">\n <!-- Dropdown Box -->\n <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n (change)=\"setValueByPath('fontColor', $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n </div>\n </div>\n \n <!-- AP-17APR25 Button for Duplicate Field -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement)\">\n Add Duplicate\n </button>\n</div>\n\n\n </div>\n </ng-container>\n </div>\n </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{margin-left:10px;cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: NxtSearchBox, selector: "nxt-search-box", inputs: ["placeHolderText", "question", "apiMeta", "id", "readOnly", "mode", "filterName"], outputs: ["searchValueChange"] }] });
65052
64095
  }
65053
64096
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
65054
64097
  type: Component,
65055
- args: [{ selector: 'app-properties', standalone: true, imports: [CommonModule, FormsModule, ImageCropperComponent, NxtSearchBox], template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n Attributes\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n Property\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n Appearance\n </div>\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- AP-06MAR25 Select element type show -->\n <div *ngIf=\"getProperties()\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'Image'\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search book specific for book element -->\n <div *ngIf=\"selectedElement?.type === 'Book'\">\n <label class=\"text-sm\">Search Book</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>Endpoint:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>Variable:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>Field:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>Default Field:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- help text -->\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n selectedElement.helpText }}</div>\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\">Select file category</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n </div>\n\n <!--AP-11JUN25 - Show this section only if the property key is 'primaryKey' -->\n <div *ngIf=\"prop.key === 'primaryKey'\">\n <input type=\"checkbox\" [checked]=\"getValueByPath('primaryKey')\" [disabled]=\"!getValueByPath('primaryKey') && isAnotherIdSelected()\" (change)=\"onToggleChange('primaryKey', $event)\"/>\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">primaryKey</span>\n </div>\n\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n <div *ngIf=\"prop.key === 'size'\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n class=\"size-input\" />\n </div>\n\n <!-- AP-19MAR25 Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n\n </div>\n \n <!-- AP 23MAY25 - Action Button -->\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ Add Button</button>\n </div>\n \n <div *ngFor=\"let btn of book?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>Button Name</label>\n <input type=\"text\" [(ngModel)]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event)\" placeholder=\"Enter button name\">\n </div>\n \n <div class=\"form-group\">\n <label>Event Name</label>\n <input type=\"text\" [(ngModel)]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n \n <div class=\"form-group\">\n <label>Alt</label>\n <input type=\"text\" [(ngModel)]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n \n <div class=\"form-group\">\n <label>Endpoint</label>\n <input type=\"text\" [(ngModel)]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n \n <div class=\"form-group\">\n <label>Method</label>\n <select [(ngModel)]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option [value]=\"'GET'\">GET</option>\n <option [value]=\"'POST'\">POST</option>\n <option [value]=\"'PUT'\">PUT</option>\n <option [value]=\"'DELETE'\">DELETE</option>\n </select>\n </div>\n \n <!-- AP 23MAY25 - Action Style Fields -->\n <div class=\"form-group\">\n <label>Background Color</label>\n <input type=\"color\" [(ngModel)]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n \n <div class=\"form-group\">\n <label>Border Radius</label>\n <input type=\"range\" min=\"0\" max=\"50\" [(ngModel)]=\"btn.borderRadius\" \n (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div> \n \n <div class=\"form-group\">\n <label>Button Width (px)</label>\n <input type=\"number\" [(ngModel)]=\"btn.width\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n \n <div class=\"form-group\">\n <label>Text Color</label>\n <input type=\"color\" [(ngModel)]=\"btn.textColor\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n \n <div class=\"form-group\">\n <label>Position (%)</label>\n <input type=\"range\" min=\"0\" max=\"100\" [(ngModel)]=\"btn.positionPercent\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 Remove</button>\n </div>\n </div>\n \n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID -->\n <div *ngIf=\"getProperties()\">\n <label>Label Id</label>\n <div\n style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n (change)=\"onRequiredChange($event.target.checked)\" />\n Required\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n (change)=\"onToggleChange('isReadOnly', $event)\" />\n Read Only\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n (change)=\"onToggleChange('isHidden', $event)\" />\n Is Hide\n </label>\n </div>\n </div>\n\n <!-- AP 28FEB25 - handled options with UUID -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n\n </div>\n </ng-container>\n\n <!-- SKS21MAR25 Move Style Outside the Loop -->\n <!-- Style Toggle -->\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">Style</div>\n <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n </div>\n </div>\n </div>\n\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <!-- Font Selection -->\n <div *ngIf=\"prop.key === 'font'\">\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n (change)=\"setValueByPath('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Font Size Selection -->\n <div *ngIf=\"prop.key === 'fontSize'\">\n <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n </div>\n <!-- Font Weight Selection -->\n <div *ngIf=\"prop.key === 'fontWeight'\">\n <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n </div>\n\n <div class=\"flex-container\">\n <!-- Dropdown Box -->\n <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n (change)=\"setValueByPath('fontColor', $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n </div>\n </div>\n \n <!-- AP-17APR25 Button for Duplicate Field -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement)\">\n Add Duplicate\n </button>\n</div>\n\n\n </div>\n </ng-container>\n </div>\n </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8;text-align:left}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.container{width:100%;max-width:500px;margin:0 auto;background-color:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.tabs{display:flex;background-color:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background-color:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:flex;gap:16px;margin-bottom:8px;color:#666;font-size:14px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],select{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.select-container{position:relative;width:100%}.dropdown-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background-color:#4caf50}.view-icon{background-color:#2196f3}.delete-icon{background-color:#f44336}.color-picker-row{display:flex;align-items:center}.color-picker-container{display:flex;align-items:center;border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box{width:30px;border:none;height:30px}.hex-label{color:#999;margin-right:5px}.hex-input{width:100px}.divider{border-top:1px dashed #ddd;margin:20px 0}.button-container{display:flex;padding:15px;background-color:#f9f9f9;border-top:1px solid #eee}.cancel-btn,.save-btn{padding:12px;border:none;border-radius:4px;cursor:pointer;font-weight:700}.cancel-btn{flex:1;background-color:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{flex:1;background-color:#0052cc;color:#fff}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;padding:8px}textarea{width:100%;min-height:55px;padding:8px;border:1px solid #ccc;border-radius:5px;font-size:14px;resize:vertical}.flex-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}.input-box-field select{background-color:#28343e;color:#fff;border:none;padding:10px 14px;border-radius:6px;appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;font-size:14px;font-family:inherit}.input-box-field{position:relative}.input-box-field select::-ms-expand{display:none}.input-box-field:after{content:\"\\25bc\";position:absolute;top:50%;right:10px;transform:translateY(-50%);color:#1c1b1f;pointer-events:none;font-size:10px}.color-selector input[type=color]{width:78px;height:40px;border-radius:4px;background:none;cursor:pointer}.hex-input-container{display:flex;font-size:12px;gap:20px;color:#b0b0b0;align-items:center}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input-container input[type=text]{padding:10px 12px;border:1px solid #d1d1d1;border-radius:6px;font-size:14px;width:120px;color:#28343e}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px) h;min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;font-size:.9rem;text-align:center}.form-group{flex-direction:column}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{flex:1;padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}@media screen and (max-width: 768px){.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background-color:#d0d9ff;border-radius:4px}.link-icon{background-color:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:background-color .3s,transform .2s}.link-icon:hover{background-color:#d0e5ff}.link-icon:active{background-color:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.drag-handle{margin-left:10px;cursor:grab}.option-items:active{opacity:.5}.style-toggle-header{display:flex;justify-content:space-between;align-items:center;background-color:#f8f8f8;border:1px solid #ddd;padding:10px;border-radius:6px;cursor:pointer;margin-bottom:6px}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background-color:#2c6dd5}.add-button{padding:8px 14px;background-color:#0954c5;color:#fff;border:none;border-radius:8px;cursor:pointer}.add-button:hover{background-color:#0954c5}.button-config-card{background-color:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.form-group{margin-bottom:12px}.form-group label{display:block;font-weight:600;margin-bottom:6px}.form-group input,.form-group select{padding:8px 10px;border:1px solid #ccc;border-radius:6px}.remove-button{background-color:#e74c3c;color:#fff;border:none;padding:6px 12px;margin-top:10px;border-radius:6px;cursor:pointer}.remove-button:hover{background-color:#c0392b}\n"] }]
64098
+ args: [{ selector: 'app-properties', standalone: true, imports: [CommonModule, FormsModule, ImageCropperComponent, NxtSearchBox], template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<div class=\"container\">\n <div class=\"tabs\">\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'attributes'}\" (click)=\"setActiveTab('attributes')\">\n Attributes\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'property'}\" (click)=\"setActiveTab('property')\">\n Property\n </div>\n <div class=\"tab\" [ngClass]=\"{'active': activeTab === 'appearance'}\" (click)=\"setActiveTab('appearance')\">\n Appearance\n </div>\n </div>\n\n <div class=\"tab-content\" *ngIf=\"activeTab === 'attributes'\">\n <!-- Element Properrties -->\n <!-- AP-06MAR25 Select element type show -->\n <div *ngIf=\"getProperties()\">\n <!-- SKS25MAR25 this is for image edit -->\n <div *ngIf=\"selectedElement?.type === 'Image'\">\n <image-cropper *ngIf=\"selectedElement.imageData \" [imageBase64]=\"selectedElement.orgImageData\"\n [disabled]=\"false\" [alignImage]=\"alignImage\" [roundCropper]=\"roundCropper\" [backgroundColor]=\"'white'\"\n imageAltText=\"Alternative image text\" [allowMoveImage]=\"false\" [hideResizeSquares]=\"false\"\n [canvasRotation]=\"canvasRotation\" [aspectRatio]=\"aspectRatio\" [containWithinAspectRatio]=\"false\"\n [maintainAspectRatio]=\"false\" [cropperStaticWidth]=\"cropperStaticWidth\"\n [cropperStaticHeight]=\"cropperStaticHeight\" [cropperMinWidth]=\"cropperMinWidth\"\n [cropperMinHeight]=\"cropperMinHeight\" [cropperMaxWidth]=\"cropperMaxWidth\"\n [cropperMaxHeight]=\"cropperMaxHeight\" [resetCropOnAspectRatioChange]='true' [(cropper)]=\"cropper\"\n [(transform)]=\"transform\" [onlyScaleDown]=\"true\" output=\"blob\" format=\"png\"\n (imageCropped)=\"imageCropped($event)\" (cropperReady)=\"cropperReady($event)\"></image-cropper>\n <div *ngIf=\"selectedElement.imageData \" style=\"display: flex; gap: 2px;\">\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateLeft()\" title=\"Rotate Left\">\u27F2</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"rotateRight()\" title=\"Rotate Right\">\u27F3</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomOut()\" title=\"Zoom Out\">-</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"zoomIn()\" title=\"Zoom In\">+</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveLeft()\" title=\"Move Left\">\u2190</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveRight()\" title=\"Move Right\">\u2192</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveUp()\" title=\"Move Up\">\u2191</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"moveDown()\" title=\"Move Down\">\u2193</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipHorizontal()\" [class.enabled]=\"transform.flipH\"\n title=\"Flip Horizontally\">\u2194</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"flipVertical()\" [class.enabled]=\"transform.flipV\"\n title=\"Flip Vertically\">\u2195</div>\n <div class=\"cursor-pointer logo-icon\" (click)=\"resetImage()\" title=\"Reset\">\u00D7</div>\n </div>\n </div>\n <!-- SKS28MAR25 search book specific for book element -->\n <div *ngIf=\"selectedElement?.type === 'Book'\">\n <label class=\"text-sm\">Search Book</label>\n <div style=\"display: flex; gap: 2px; align-items: center; justify-content: center;\">\n <nxt-search-box [question]=\"selectedElement\" [apiMeta]=\"bookSubtext\" [placeHolderText]=\"'Search...'\"\n (searchValueChange)=\"childEventCapture($event.value)\">\n </nxt-search-box>\n <div class=\"link-icon\">\n <svg (click)=\"linkToggleDropdown($event)\" fill=\"#000000\" version=\"1.1\" id=\"Capa_1\"\n xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24px\" height=\"24px\"\n viewBox=\"0 0 450 450\" xml:space=\"preserve\">\n <g>\n <g>\n <g>\n <path d=\"M318.15,230.195l77.934-77.937c31.894-31.892,31.894-83.782-0.004-115.674l-12.66-12.66\n c-31.893-31.896-83.78-31.896-115.674-0.004l-77.937,77.934c-17.588,17.588-25.457,41.264-23.646,64.311\n c-23.045-1.813-46.722,6.056-64.308,23.647L23.92,267.748c-31.894,31.889-31.894,83.779,0,115.674l12.664,12.662\n c31.893,31.893,83.783,31.893,115.674,0l77.935-77.936c17.592-17.59,25.459-41.266,23.647-64.309\n C276.884,255.654,300.56,247.783,318.15,230.195z M202.653,290.605l-77.936,77.938c-16.705,16.703-43.889,16.703-60.59,0\n l-12.666-12.666c-16.705-16.701-16.703-43.885,0-60.594l77.936-77.932c14.14-14.141,35.779-16.306,52.226-6.516l-32.302,32.307\n c-7.606,7.604-7.606,19.938,0,27.541c7.605,7.607,19.937,7.607,27.541,0l32.306-32.303\n C218.959,254.828,216.795,276.469,202.653,290.605z M238.382,209.169l32.299-32.306c7.608-7.602,7.608-19.935,0-27.538\n c-7.604-7.61-19.936-7.61-27.541-0.004l-32.303,32.303c-9.791-16.446-7.627-38.087,6.514-52.226l77.935-77.935\n c16.707-16.707,43.89-16.707,60.594,0l12.664,12.664c16.705,16.705,16.705,43.886,0,60.591l-77.936,77.937\n C276.468,216.797,254.828,218.959,238.382,209.169z\" />\n <path d=\"M343.466,261.465c-45.287,0-82,36.713-82,82s36.713,82,82,82c45.286,0,82-36.713,82-82S388.753,261.465,343.466,261.465z\n M372.505,333.564l-56.046,56.104c-0.239,0.238-0.536,0.41-0.862,0.496l-22.315,5.85c-0.649,0.168-1.347-0.02-1.822-0.494\n c-0.477-0.479-0.666-1.172-0.496-1.824l5.826-22.318c0.084-0.326,0.256-0.627,0.494-0.863l56.047-56.104\n c0.742-0.742,1.945-0.744,2.688-0.002l4.548,4.541c0.739,0.74,0.741,1.943,0,2.688l-37.433,37.471l4.709,4.703l37.435-37.471\n c0.739-0.742,1.94-0.742,2.682-0.002l4.55,4.541C373.25,331.617,373.25,332.822,372.505,333.564z M395.472,310.574l-17,17.018\n c-0.739,0.744-1.942,0.744-2.685,0.002l-16.489-16.475c-0.744-0.74-0.744-1.943-0.002-2.688l17-17.02\n c0.741-0.74,1.944-0.74,2.688-0.002l16.487,16.477C396.216,308.629,396.216,309.832,395.472,310.574z\" />\n </g>\n </g>\n </g>\n </svg>\n <div class=\"link-dropdown-menu\" *ngIf=\"isLinkDropdownOpen\" #dropdown>\n <label>Endpoint:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.endpoint\" />\n\n <label>Variable:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.variable\" />\n\n <label>Field:</label>\n <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" />\n\n <label>Default Field:</label>\n <input type=\"text\" [(ngModel)]=\"bookSubtext.defaultField\" />\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"form-group\">\n <label *ngIf=\"prop.type !== 'checkbox' && prop.type !== 'subQuestion'\" class=\"text-sm\">{{ prop.label\n }}</label>\n\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- help text -->\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\">{{\n selectedElement.helpText }}</div>\n\n <!-- questionNumber -->\n <input *ngIf=\"prop.key === 'questionNumber'\" type=\"number\" [value]=\"selectedElement.questionNumber\"\n (input)=\"setValueByPath('questionNumber', $event.target.value)\" />\n\n <!-- file -->\n <!-- Add this inside the elementProps loop where other inputs are rendered -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" [value]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option value=\"\">Select file category</option>\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">{{ prop.label }}</span>\n\n </div>\n\n <!--AP-11JUN25 - Show this section only if the property key is 'primaryKey' -->\n <div *ngIf=\"prop.key === 'primaryKey'\">\n <input type=\"checkbox\" [checked]=\"getValueByPath('primaryKey')\" [disabled]=\"!getValueByPath('primaryKey') && isAnotherIdSelected()\" (change)=\"onToggleChange('primaryKey', $event)\"/>\n <span class=\"toggle-label\" style=\"padding-left: 10px;\">primaryKey</span>\n </div>\n\n <!-- SKS20MAR25 Subquestion Type -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div style=\"display: flex; flex-direction: row; gap: 10px; align-items: center;\">\n <div>{{ prop.label }}</div>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n </div>\n <!-- SKS20MAR25 Render subquestions when checkbox is checked -->\n <div\n *ngIf=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key)\">\n <div *ngFor=\"let subProp of prop.subQuestion\"\n style=\"background-color: #e7f2ff; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <label>{{ subProp.label }}</label>\n <div *ngIf=\"subProp.type === 'array'\">\n <!-- Iterate over filtered columns to display checkboxes -->\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"checkbox\"\n [checked]=\"subProp.operands ? subProp.operands.includes(column.apiName) : false\"\n (change)=\"onCheckboxChange(subProp.targetArray,subProp.targetArrayKey,subProp.key, column.apiName, $event.target.checked)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS21MAR25 New radio type -->\n <div *ngIf=\"subProp.type === 'radio'\">\n <div *ngFor=\"let column of filteredColumns\">\n <label>\n <input type=\"radio\" [name]=\"subProp.key\" [value]=\"column.apiName\"\n [checked]=\"getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key) === column.apiName\"\n (change)=\"onRadioChange(subProp.targetArray, subProp.targetArrayKey, subProp.key, column.apiName)\">\n {{ column.apiName }}\n </label>\n </div>\n </div>\n <!-- SKS20MAR25 Add more subproperty types as needed -->\n <!-- Inside the subProp ngFor loop -->\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"selectedElement.type === 'Table' ? (subProp.targetArray ? getValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key ) : getValueByPath(subProp.key) ) : getValueByPath(subProp.key)\"\n (input)=\"selectedElement.type === 'Table' ? (subProp.targetArray ? updateValueByArrayPath(subProp.targetArray, subProp.targetArrayKey, selectColumn, subProp.key, $event) : setValueByPath(subProp.key, $event.target.value) ) : setValueByPath(subProp.key, $event.target.value)\" />\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n <select *ngIf=\"subProp.type === 'select'\" [value]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.value)\">\n <option *ngFor=\"let option of subProp.options\" [value]=\"option\">{{ option }}</option>\n </select>\n <input *ngIf=\"subProp.type === 'checkbox'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <!-- SKS20MAR25 Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <div *ngIf=\"prop.type === 'style'\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\" />\n </button>\n </div>\n\n <!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n <div *ngIf=\"prop.key === 'size'\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"setValueByPath('size', $event.target.value)\"\n class=\"size-input\" />\n </div>\n\n <!-- AP-19MAR25 Line Properties -->\n <!-- Padding Top -->\n <div *ngIf=\"prop.key === 'paddingTop'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingTop\"\n (input)=\"setValueByPath('paddingTop', $event.target.value)\" />\n </div>\n\n <!-- Padding Bottom -->\n <div *ngIf=\"prop.key === 'paddingBottom'\">\n <input type=\"number\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement?.paddingBottom\"\n (input)=\"setValueByPath('paddingBottom', $event.target.value)\" />\n </div>\n\n <!-- Line Style -->\n <div *ngIf=\"prop.key === 'lineStyle'\">\n <select [value]=\"selectedElement?.lineStyle\" (change)=\"setValueByPath('lineStyle', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n\n <!-- Color -->\n <div *ngIf=\"prop.key === 'color'\">\n <input type=\"color\" [value]=\"selectedElement?.color\"\n (input)=\"setValueByPath('color', $event.target.value)\" />\n </div>\n\n </div>\n \n <!-- AP 23MAY25 - Action Button -->\n <div *ngIf=\"prop.key === 'title'\" style=\"margin-top: 15px; border: 1px solid #ddd; padding: 20px; border-radius: 12px; background-color: #f9f9f9;\">\n <div class=\"form-header\">\n <label class=\"form-label\">{{ prop.label }}</label>\n <button (click)=\"addNewButton()\" class=\"add-button\">+ Add Button</button>\n </div>\n \n <div *ngFor=\"let btn of book?.questionbook?.action || []; let i = index\" class=\"button-config-card\">\n <div class=\"form-group\">\n <label>Button Name</label>\n <input type=\"text\" [(ngModel)]=\"btn.name\" (ngModelChange)=\"onButtonPropertyChange(i, 'name', $event)\" placeholder=\"Enter button name\">\n </div>\n \n <div class=\"form-group\">\n <label>Event Name</label>\n <input type=\"text\" [(ngModel)]=\"btn.eventtoemit\" (ngModelChange)=\"onButtonPropertyChange(i, 'eventtoemit', $event)\" placeholder=\"Event to emit\">\n </div>\n \n <div class=\"form-group\">\n <label>Alt</label>\n <input type=\"text\" [(ngModel)]=\"btn.alt\" (ngModelChange)=\"onButtonPropertyChange(i, 'alt', $event)\" placeholder=\"Button alt text\">\n </div>\n \n <div class=\"form-group\">\n <label>Endpoint</label>\n <input type=\"text\" [(ngModel)]=\"btn.endpoint\" (ngModelChange)=\"onButtonPropertyChange(i, 'endpoint', $event)\" placeholder=\"API endpoint\">\n </div>\n \n <div class=\"form-group\">\n <label>Method</label>\n <select [(ngModel)]=\"btn.method\" (ngModelChange)=\"onButtonPropertyChange(i, 'method', $event)\">\n <option [value]=\"'GET'\">GET</option>\n <option [value]=\"'POST'\">POST</option>\n <option [value]=\"'PUT'\">PUT</option>\n <option [value]=\"'DELETE'\">DELETE</option>\n </select>\n </div>\n \n <!-- AP 23MAY25 - Action Style Fields -->\n <div class=\"form-group\">\n <label>Background Color</label>\n <input type=\"color\" [(ngModel)]=\"btn.bgColor\" (ngModelChange)=\"onButtonPropertyChange(i, 'bgColor', $event)\">\n </div>\n \n <div class=\"form-group\">\n <label>Border Radius</label>\n <input type=\"range\" min=\"0\" max=\"50\" [(ngModel)]=\"btn.borderRadius\" \n (ngModelChange)=\"onButtonPropertyChange(i, 'borderRadius', $event)\">\n <span>{{ btn.borderRadius }}px</span>\n </div> \n \n <div class=\"form-group\">\n <label>Button Width (px)</label>\n <input type=\"number\" [(ngModel)]=\"btn.width\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'width', $event)\" min=\"50\" placeholder=\"Enter width in px\">\n </div>\n \n <div class=\"form-group\">\n <label>Text Color</label>\n <input type=\"color\" [(ngModel)]=\"btn.textColor\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'textColor', $event)\">\n </div>\n \n <div class=\"form-group\">\n <label>Position (%)</label>\n <input type=\"range\" min=\"0\" max=\"100\" [(ngModel)]=\"btn.positionPercent\"\n (ngModelChange)=\"onButtonPropertyChange(i, 'positionPercent', $event)\">\n <span>{{ btn.positionPercent }}%</span>\n </div>\n <button (click)=\"removeButton(btn)\" class=\"remove-button\">\u00D7 Remove</button>\n </div>\n </div>\n \n </ng-container>\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'property'\">\n <!-- Field Elements Properties -->\n <!-- AP-06MAR25 Show elements ID -->\n <div *ngIf=\"getProperties()\">\n <label>Label Id</label>\n <div\n style=\"font-size: 13px; padding: 11px; border-radius: 5px; background-color: #f8f8f8; border: 1px solid #ddd;\">\n {{ headerSelect ? bookId : selectedElement.id }}</div>\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n\n <!-- SKS21MAR25 Toggle Group -->\n <div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isOptional\"\n (change)=\"onRequiredChange($event.target.checked)\" />\n Required\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\"\n (change)=\"onToggleChange('isReadOnly', $event)\" />\n Read Only\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" />\n Disabled\n </label>\n </div>\n <div class=\"toggle-item\">\n <label class=\"toggle-label\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\"\n (change)=\"onToggleChange('isHidden', $event)\" />\n Is Hide\n </label>\n </div>\n </div>\n\n <!-- AP 28FEB25 - handled options with UUID -->\n <div\n *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\"\n class=\"options-container\">\n\n <div class=\"option-list\" (dragover)=\"onDragOver($event)\" (drop)=\"onDrop($event, prop.key)\">\n <div *ngFor=\"let option of selectedElement[prop.key]\" class=\"option-items\" [attr.data-id]=\"option.id\"\n draggable=\"true\" (dragstart)=\"onDragStart($event, option.id)\">\n\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Option\" class=\"options\" />\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], option.id)\">\n <span class=\"drag-handle\">\u2630</span>\n </div>\n </div>\n\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add</span>\n </div>\n </button>\n </div>\n\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"headerSelect ? book.records[0].title : (selectedElement?.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ) : getValueByPath(prop.key))\"\n (input)=\"headerSelect ? updateTitle($event.target.value) : (selectedElement?.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : setValueByPath(prop.key, $event.target.value) ) : setValueByPath(prop.key, $event.target.value))\"\n [class.read-only]=\"selectedElement.readOnly\" [readonly]=\"selectedElement.readOnly\" />\n\n <!-- Sub Questions Toggle -->\n <div *ngIf=\"prop.type === 'subQuestion'\">\n <div class=\"style-toggle-header\" (click)=\"toggleSubQuestion(prop)\">\n <div class=\"head-elements\">Sub Text</div>\n <img [src]=\"prop.isExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <!-- Render subquestions when arrow is down -->\n <div *ngIf=\"prop.isExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div *ngFor=\"let subProp of prop.subQuestion\" class=\"sub-question-container\">\n <div class=\"form-group\">\n <label>{{ subProp.label }}</label>\n\n <input *ngIf=\"subProp.type === 'text'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n \n <!-- AP-02APR25 Render input field only if subProp.type is 'array' -->\n <input *ngIf=\"subProp.type === 'array'\" type=\"text\" [placeholder]=\"subProp.placeholder\"\n [value]=\"getValueByPath(subProp.key)\" (input)=\"setValueByPath(subProp.key, $event.target.value)\" />\n <!-- <input type=\"text\" [ngModel]=\"fieldAsString\" (ngModelChange)=\"updateField($event)\" /> -->\n\n <input *ngIf=\"subProp.type === 'boolean'\" type=\"checkbox\" [checked]=\"getValueByPath(subProp.key)\"\n (change)=\"setValueByPath(subProp.key, $event.target.checked)\" />\n </div>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"prop.type === 'checkbox'\">\n <span class=\"toggle-label\" style=\"padding-right: 10px;\">{{ prop.label }}</span>\n <input type=\"checkbox\"\n [checked]=\"selectedElement.type === 'Table' ? (prop.targetArray ? getValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key ) : getValueByPath(prop.key) ): getValueByPath(prop.key) \"\n (change)=\" selectedElement.type === 'Table' ? (prop.targetArray ? updateValueByArrayPath(prop.targetArray, prop.targetArrayKey, selectColumn, prop.key, $event) : onToggleChange(prop.key, $event) ) : onToggleChange(prop.key, $event)\" />\n\n </div>\n\n </div>\n </ng-container>\n\n <!-- SKS21MAR25 Move Style Outside the Loop -->\n <!-- Style Toggle -->\n <div class=\"style-toggle-header\" (click)=\"toggleStyleSection()\">\n <div class=\"head-elements\">Style</div>\n <img [src]=\"isStyleExpanded ? '../assets/icons/arrow-down.svg' : '../assets/icons/arrow-right.svg'\"\n alt=\"Toggle Arrow\" class=\"arrow-icon\">\n </div>\n\n <div *ngIf=\"isStyleExpanded\" style=\"border: 1px solid #ddd; padding: 8px; border-radius: 4px;\">\n <div class=\"form-group\">\n <div *ngFor=\"let key of getStyleKeys()\">\n <label>{{ key }}</label>\n <input type=\"text\" [(ngModel)]=\"selectedElement.style[key]\"\n (input)=\"setValueByPath('style.' + key, $event.target.value)\" placeholder=\"Enter {{ key }}\" />\n </div>\n </div>\n </div>\n\n </div>\n </div>\n <div class=\"tab-content\" *ngIf=\"activeTab === 'appearance'\">\n <div *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().appearance\">\n <div class=\"form-group\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <!-- Font Selection -->\n <div *ngIf=\"prop.key === 'font'\">\n <select *ngIf=\"prop.type === 'select'\" class=\"select-container\" [(ngModel)]=\"selectedElement.font\"\n (change)=\"setValueByPath('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\" (input)=\"setValueByPath(prop.key, $event.target.value)\" />\n\n <!-- Font Size Selection -->\n <div *ngIf=\"prop.key === 'fontSize'\">\n <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n </div>\n <!-- Font Weight Selection -->\n <div *ngIf=\"prop.key === 'fontWeight'\">\n <select *ngIf=\"prop.type === 'select'\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n {{ option.label }}\n </option>\n </select>\n </div>\n\n <div class=\"flex-container\">\n <!-- Dropdown Box -->\n <div *ngIf=\"prop.type === 'dropdown'\" class=\"input-box-field\">\n <select [(ngModel)]=\"selectedElement[prop.key]\" (change)=\"setValueByPath(prop.key, $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n\n <!-- Color Picker -->\n <div *ngIf=\"prop.type === 'color'\" class=\"color-selector\">\n <input type=\"color\" [(ngModel)]=\"selectedElement.fontColor\"\n (change)=\"setValueByPath('fontColor', $event.target.value)\">\n </div>\n\n <!-- HEX Input Box -->\n <div *ngIf=\"prop.type === 'color'\" class=\"hex-input-container\">\n <span>HEX Code</span>\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key]\"\n (change)=\"setValueByPath(prop.key, $event.target.value)\" />\n </div>\n </div>\n \n <!-- AP-17APR25 Button for Duplicate Field -->\n<div *ngIf=\"prop.type === 'button-toggle'\" class=\"button-toggle-wrapper\">\n <button type=\"button\"\n class=\"toggle-button\"\n (click)=\"duplicateField(selectedElement)\">\n Add Duplicate\n </button>\n</div>\n\n\n </div>\n </ng-container>\n </div>\n </div>\n\n<!-- AP-08APR25 Default Save Button -->\n<div class=\"button-container\" *ngIf=\"!templateSelected\">\n <button class=\"cancel-btn\" (click)=\"onCancel()\">Cancel</button>\n <button class=\"save-btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n<!-- AP-08APR25 Template Save Button -->\n<div class=\"button-container\" *ngIf=\"templateSelected\" style=\"margin-top: 20px;\">\n <button class=\"save-btn\" (click)=\"handleTemplateSave()\">Save Template</button>\n</div>\n\n</div>", styles: ["*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:calc(100vh - 20px);overflow-y:auto}.container{width:100%;max-width:500px;margin:0 auto;background:#fff;box-shadow:0 2px 10px #0000001a;overflow:hidden;font-family:Arial,sans-serif}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.toggle-header,.style-toggle-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:10px;background:#f8f8f8;border:1px solid #ddd;border-radius:6px;margin-bottom:6px}.tabs{display:flex;background:#f0f2f5;border-bottom:2px solid #0052cc}.tab{flex:1;padding:15px 10px;text-align:center;cursor:pointer}.tab.active{background:#0052cc;color:#fff;font-weight:700}.tab-content{padding:20px;max-height:80vh;overflow-y:auto;overflow-x:hidden}.form-group{margin-bottom:15px}label{display:block;font-size:14px;font-weight:500;color:#444;margin-bottom:8px}.required:before{content:\"*\";color:red;margin-right:3px}input[type=text],input[type=number],select,textarea{width:100%;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:all .3s;background:#f8f8f8}input:focus,select:focus,textarea:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}textarea{min-height:55px;resize:vertical}button,.btn{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:all .3s}button:hover,.btn:hover{background:#0056b3;transform:translateY(-2px)}.add-button{padding:8px 14px;background:#0954c5;border-radius:8px}.remove-button{background:#e74c3c;padding:6px 12px;margin-top:10px}.remove-button:hover{background:#c0392b}.cancel-btn{background:#fff;color:#666;border:1px solid #ddd;margin-right:10px}.save-btn{background:#0052cc}.toggle-group{display:grid;grid-template-columns:1fr 1fr;gap:10px}.toggle-item{display:flex;align-items:center;gap:10px;padding:8px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.checkbox-row{display:flex;margin-bottom:10px}.checkbox-group{display:flex;align-items:center;margin-right:20px;min-width:120px}.checkbox-group input[type=checkbox]{margin-right:5px}.color-picker-row,.color-picker-container{display:flex;align-items:center}.color-picker-container{border:1px solid #ddd;border-radius:4px;margin-right:10px}.color-box,.color-selector input[type=color]{width:78px;height:40px;border:none;border-radius:4px;cursor:pointer}.hex-input-container{display:flex;gap:20px;align-items:center;font-size:12px;color:#b0b0b0}.hex-input-container span{font-size:14px;margin-top:10px}.hex-input,.hex-input-container input[type=text]{width:120px;padding:10px 12px;border:1px solid #d1d1d1;color:#28343e}.hex-label{color:#999;margin-right:5px}.select-container,.input-box-field{position:relative;width:100%}.dropdown-arrow,.input-box-field:after{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;color:#666;font-size:12px}.input-box-field:after{content:\"\\25bc\";color:#1c1b1f;font-size:10px}.input-box-field select{background:#28343e;color:#fff;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.input-box-field select::-ms-expand{display:none}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}.head-elements{font-size:14px;font-weight:500;color:#444}.options-container{display:flex;flex-direction:column;gap:12px}.field-size-controls,.flex-container{display:flex;align-items:center;gap:12px}.flex-container{margin-bottom:1rem}.size-input{width:110px;text-align:center}.input-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}.subtext-textarea{width:100%;margin-left:auto}.arrow-icon{width:19px;height:23px;transition:transform .3s ease}.icon{display:inline-block;width:18px;height:18px;border-radius:50%;text-align:center;line-height:18px;color:#fff;font-size:12px;margin-left:5px}.edit-icon{background:#4caf50}.view-icon{background:#2196f3}.delete-icon{background:#f44336}.logo-icon{width:20px;height:20px;display:flex;justify-content:center;background:#d0d9ff;border-radius:4px}.link-icon{background:#e7f2ff;padding:5px;border-radius:5px;margin:5px;display:inline-block;cursor:pointer;position:relative;transition:all .3s}.link-icon:hover{background:#d0e5ff}.link-icon:active{background:#a8d0ff}.link-dropdown-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ccc;padding:10px;width:200px;box-shadow:0 4px 6px #0000001a}.link-dropdown-menu input{width:100%;margin-bottom:5px;padding:5px;border:1px solid #ccc;border-radius:3px}.option-items{display:flex;align-items:center;padding:5px;border:1px solid #ccc;margin-bottom:10px;cursor:grab;background:#fff}.option-items:active{opacity:.5}.drag-handle{margin-left:10px;cursor:grab}.button-toggle-wrapper{margin-top:8px}.toggle-button{padding:8px 16px;border:1px solid #cbd2d9;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease-in-out}.toggle-button.active:hover{background:#2c6dd5}.button-config-card{background:#fff;padding:15px;border-radius:12px;border:1px solid #ccc;margin-top:20px;box-shadow:0 2px 8px #0000000d}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.button-container{display:flex;padding:15px;background:#f9f9f9;border-top:1px solid #eee}.button-container .cancel-btn,.button-container .save-btn{flex:1;padding:12px;font-weight:700}.divider{border-top:1px dashed #ddd;margin:20px 0}input{width:auto}@media screen and (max-width: 768px){.container{height:calc(100vh - 20px);min-height:calc(100vh - 20px)}.tabs{flex-direction:column}.tab{padding:1rem;font-size:.9rem}.form-group,.tab-content[aria-label=attributes] .form-group,.tab-content[aria-label=property] .form-group,.tab-content[aria-label=appearance] .form-group{flex-direction:column;grid-template-columns:1fr}.toggle-group{flex-direction:column;align-items:flex-start}}@media screen and (max-width: 480px){.container{padding:0 10px}.tabs{flex-direction:column}.tab{padding:1rem;border-bottom:1px solid #dee2e6}input[type=text],input[type=number],select,textarea{font-size:.9rem}}\n"] }]
65056
64099
  }], ctorParameters: () => [{ type: i1.HttpClient }, { type: FormBuilderService }, { type: TemplateService }], propDecorators: { formButtonHandler: [{
65057
64100
  type: Output
65058
64101
  }], templateSaveHandler: [{
@@ -65072,7 +64115,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
65072
64115
  // AP 22JAN25 - form preview and All form elements
65073
64116
  class ElementComponent {
65074
64117
  formBuilderService;
65075
- //@Output() elementButtonClicked = new EventEmitter<string>();
65076
64118
  bookletJSON;
65077
64119
  bookletId;
65078
64120
  templateMode = new EventEmitter();
@@ -65082,12 +64124,12 @@ class ElementComponent {
65082
64124
  bookId;
65083
64125
  sections = {
65084
64126
  basic: true, // Basic Elements open by default
65085
- advanced: true // Advanced Elements closed by default
64127
+ advanced: true, // Advanced Elements closed by default
65086
64128
  };
65087
64129
  basicElements = [];
65088
64130
  advancedElements = [];
65089
64131
  //elementDisabledArray: any;
65090
- version = VERSION.version; //SKS10MAR25 get version from environment/version.ts
64132
+ version = VERSION.version; //SKS10MAR25 get version from environment/version.ts
65091
64133
  book;
65092
64134
  selectedElement = null;
65093
64135
  isSelectTablePopup = false;
@@ -65096,53 +64138,50 @@ class ElementComponent {
65096
64138
  dots = Array(6);
65097
64139
  draggedIndex = null;
65098
64140
  templateSelected = false;
65099
- //subscription: any;
65100
64141
  constructor(formBuilderService) {
65101
64142
  this.formBuilderService = formBuilderService;
65102
64143
  }
65103
- // AP-06MAR25 New Design Change Elements Basic , Advanced
65104
- // AP-06MAR25 Add RichText Area
65105
- // AP-12MAR25 Add Date
64144
+ // AP-06MAR25 Basic elements updated (RichTextArea, Date added)
65106
64145
  ngOnInit() {
65107
64146
  this.basicElements = [
65108
- { "type": "Text", "img": "Text", "label": "Text" },
65109
- { "type": "Number", "img": "Number", "label": "Number" },
65110
- { "type": "Label", "img": "Label", "label": "Label" },
65111
- { "type": "Email", "img": "Email", "label": "Email" },
65112
- { "type": "Date", "img": "Date", "label": "Date" },
65113
- { "type": "Time", "img": "Time", "label": "Time" },
65114
- { "type": "DateTime", "img": "DateTime", "label": "DateTime" },
65115
- { "type": "Calendar", "img": "Calendar", "label": "Calendar" },
65116
- { "type": "File", "img": "File", "label": "Files" },
65117
- { "type": "Image", "img": "Image", "label": "Image" },
65118
- { "type": "Checkbox", "img": "CheckBox", "label": "Checkbox" },
65119
- { "type": "Radio", "img": "Radio", "label": "Radio" },
65120
- { "type": "Dropdown", "img": "Drop", "label": "Dropdown" },
65121
- { "type": "TextArea", "img": "TextArea", "label": "Text Area" },
65122
- { "type": "RichTextArea", "img": "RichText", "label": "Rich Text" },
64147
+ { type: "Text", img: "Text", label: "Text" },
64148
+ { type: "Number", img: "Number", label: "Number" },
64149
+ { type: "Label", img: "Label", label: "Label" },
64150
+ { type: "Email", img: "Email", label: "Email" },
64151
+ { type: "Date", img: "Date", label: "Date" },
64152
+ { type: "Time", img: "Time", label: "Time" },
64153
+ { type: "DateTime", img: "DateTime", label: "DateTime" },
64154
+ { type: "Calendar", img: "Calendar", label: "Calendar" },
64155
+ { type: "File", img: "File", label: "Files" },
64156
+ { type: "Image", img: "Image", label: "Image" },
64157
+ { type: "Checkbox", img: "CheckBox", label: "Checkbox" },
64158
+ { type: "Radio", img: "Radio", label: "Radio" },
64159
+ { type: "Dropdown", img: "Drop", label: "Dropdown" },
64160
+ { type: "TextArea", img: "TextArea", label: "Text Area" },
64161
+ { type: "RichTextArea", img: "RichText", label: "Rich Text" },
65123
64162
  ];
65124
64163
  this.advancedElements = [
65125
- { "type": "Line", "img": "line", "label": "Line" },
65126
- { "type": "Space", "img": "space", "label": "Space" },
65127
- { "type": "Boolean", "img": "Boolean", "label": "Boolean" },
65128
- { "type": "Book", "img": "Search", "label": "Book" },
65129
- { "type": "List", "img": "Search", "label": "List" },
65130
- { "type": "Table", "img": "Table", "label": "Table" },
65131
- { "type": "Button", "img": "Button", "label": "Button" }
64164
+ { type: "Line", img: "line", label: "Line" },
64165
+ { type: "Space", img: "space", label: "Space" },
64166
+ { type: "Boolean", img: "Boolean", label: "Boolean" },
64167
+ { type: "Book", img: "Search", label: "Book" },
64168
+ { type: "List", img: "Search", label: "List" },
64169
+ { type: "Table", img: "Table", label: "Table" },
64170
+ { type: "Button", img: "Button", label: "Button" },
65132
64171
  ];
65133
64172
  // this.elementDisabledArray = {
65134
64173
  // Table: [
65135
- // 'Book', 'Calendar',"Boolean", 'List', 'Table', 'Checkbox', 'Radio',
65136
- // 'Dropdown', 'TextArea', 'RichTextArea', 'Number', 'Label', 'Image',
64174
+ // 'Book', 'Calendar',"Boolean", 'List', 'Table', 'Checkbox', 'Radio',
64175
+ // 'Dropdown', 'TextArea', 'RichTextArea', 'Number', 'Label', 'Image',
65137
64176
  // 'Email', 'Date', 'Time', 'DateTime', 'Line', 'Space'
65138
64177
  // ]
65139
64178
  // };
65140
- this.formBuilderService.formElements$.subscribe(elements => {
64179
+ this.formBuilderService.formElements$.subscribe((elements) => {
65141
64180
  setTimeout(() => {
65142
- this.formElements = elements.map(field => ({ ...field }));
64181
+ this.formElements = elements.map((field) => ({ ...field }));
65143
64182
  }, 0);
65144
64183
  });
65145
- if (this.bookletJSON && (this.bookletJSON !== '')) {
64184
+ if (this.bookletJSON && this.bookletJSON !== "") {
65146
64185
  this.initializeForm();
65147
64186
  }
65148
64187
  else {
@@ -65150,17 +64189,20 @@ class ElementComponent {
65150
64189
  }
65151
64190
  // AP-12MAR25 - Added to handle bookletId
65152
64191
  if (this.bookletId) {
65153
- localStorage.setItem('unique_id', this.bookletId);
64192
+ localStorage.setItem("unique_id", this.bookletId);
65154
64193
  }
65155
64194
  this.book = this.formBuilderService.getBook();
65156
- this.formBuilderService.selectedElement$.subscribe(index => {
64195
+ this.formBuilderService.selectedElement$.subscribe((index) => {
65157
64196
  const elements = this.formBuilderService.getElements();
65158
64197
  if (index >= 0) {
65159
64198
  this.selectedElement = elements[index];
65160
64199
  }
65161
64200
  // SKS19MAR25 for fieldMeta checking
65162
- if (this.selectedElement?.type === 'Table') {
65163
- this.selectedElement['fieldsMeta'] = typeof this.selectedElement.fieldsMeta === 'string' ? this.selectedElement.fieldsMeta : JSON.stringify(this.selectedElement['fieldsMeta'] || []);
64201
+ if (this.selectedElement?.type === "Table") {
64202
+ this.selectedElement["fieldsMeta"] =
64203
+ typeof this.selectedElement.fieldsMeta === "string"
64204
+ ? this.selectedElement.fieldsMeta
64205
+ : JSON.stringify(this.selectedElement["fieldsMeta"] || []);
65164
64206
  }
65165
64207
  // this.formElements = [...elements]
65166
64208
  });
@@ -65175,25 +64217,28 @@ class ElementComponent {
65175
64217
  }
65176
64218
  // AP - 26FEB25 - Added ngOnChanges to handle changes in bookletJSON
65177
64219
  ngOnChanges(changes) {
65178
- if (changes['bookletJSON'] && changes['bookletJSON'].currentValue) {
65179
- if (this.bookletJSON && this.bookletJSON !== '') {
64220
+ if (changes["bookletJSON"] && changes["bookletJSON"].currentValue) {
64221
+ if (this.bookletJSON && this.bookletJSON !== "") {
65180
64222
  // AP-28MAY25 - Check and transform `action` if it's in Existing format
65181
64223
  if (this.bookletJSON.questionbook &&
65182
64224
  this.bookletJSON.questionbook.action &&
65183
- typeof this.bookletJSON.questionbook.action === 'string') {
64225
+ typeof this.bookletJSON.questionbook.action === "string") {
65184
64226
  try {
65185
64227
  const parsedActions = JSON.parse(this.bookletJSON.questionbook.action);
65186
64228
  // AP-28MAY25 Assign specific positionPercent based on action name
65187
64229
  const newActions = parsedActions.map((item, index) => {
65188
- const positionPercent = item.name === 'Cancel' ? 3 :
65189
- item.name === 'Save' ? 14 : (10 + index * 10);
64230
+ const positionPercent = item.name === "Cancel"
64231
+ ? 3
64232
+ : item.name === "Save"
64233
+ ? 14
64234
+ : 10 + index * 10;
65190
64235
  return {
65191
64236
  ...item,
65192
64237
  positionPercent: positionPercent,
65193
64238
  width: 100,
65194
64239
  textColor: "#ffffff",
65195
64240
  borderRadius: 6,
65196
- id: index + 1
64241
+ id: index + 1,
65197
64242
  };
65198
64243
  });
65199
64244
  // AP-28MAY25 Replace the old action string with the newly formatted array
@@ -65213,7 +64258,7 @@ class ElementComponent {
65213
64258
  // AP-08APR25 Template is selected, update form elements and emit template mode
65214
64259
  onTemplateSelected(event) {
65215
64260
  this.formBuilderService.clearElements();
65216
- event.elements.forEach(el => this.formBuilderService.addElement(el));
64261
+ event.elements.forEach((el) => this.formBuilderService.addElement(el));
65217
64262
  // Emit template mode to parent
65218
64263
  this.templateMode.emit(true);
65219
64264
  }
@@ -65234,17 +64279,18 @@ class ElementComponent {
65234
64279
  if (Array.isArray(subQuestions)) {
65235
64280
  subQuestions.forEach((subQuestion) => {
65236
64281
  // AP-04APR24 If subQuestion.style exists as a string and is empty, replace it with a default style object
65237
- if (typeof subQuestion.style === "string" && subQuestion.style.trim() === "") {
64282
+ if (typeof subQuestion.style === "string" &&
64283
+ subQuestion.style.trim() === "") {
65238
64284
  subQuestion.style = {
65239
- "labelClass": null,
65240
- "labelStyle": null,
65241
- "labelValueStyle": null,
65242
- "inputClass": null,
65243
- "inputStyle": null,
65244
- "showLabel": true,
65245
- "bookStyle": null,
65246
- "direction": "ltr",
65247
- "questionStyle": null
64285
+ labelClass: null,
64286
+ labelStyle: null,
64287
+ labelValueStyle: null,
64288
+ inputClass: null,
64289
+ inputStyle: null,
64290
+ showLabel: true,
64291
+ bookStyle: null,
64292
+ direction: "ltr",
64293
+ questionStyle: null,
65248
64294
  };
65249
64295
  }
65250
64296
  });
@@ -65257,23 +64303,20 @@ class ElementComponent {
65257
64303
  this.selectedFieldIndex = index; // element is selected
65258
64304
  this.formBuilderService.setSelectedElement(index);
65259
64305
  this.book = this.formBuilderService.getBook();
65260
- //const element = this.formElements[index];
65261
- // this.elementButtonClicked.emit(element.type);
65262
64306
  }
65263
- //selectedIndex: number | null = null;
65264
64307
  selectedFieldIndex = null; // element is cleared
65265
64308
  selectHeading(event) {
65266
- this.formBuilderService.selectHeading(event); //AP-10MAR25 Updates the selected heading in the service
65267
- this.book = this.formBuilderService.getBook(); //AP-10MAR25 Retrieves the updated book/form data
64309
+ this.formBuilderService.selectHeading(event); //AP-10MAR25 Updates the selected heading in the service
64310
+ this.book = this.formBuilderService.getBook(); //AP-10MAR25 Retrieves the updated book/form data
65268
64311
  }
65269
- // AP-17APR25 generateUiId
64312
+ // AP-17APR25 generateUiId
65270
64313
  generateUiId() {
65271
64314
  return this.formBuilderService.addElementWithId();
65272
64315
  }
65273
64316
  addElement(type) {
65274
64317
  const unique_id = this.generateUiId();
65275
64318
  this.currentType = type;
65276
- if (this.selectedElement?.type === 'Table' && this.addTable) {
64319
+ if (this.selectedElement?.type === "Table" && this.addTable) {
65277
64320
  this.isSelectTablePopup = true;
65278
64321
  }
65279
64322
  else {
@@ -65318,37 +64361,34 @@ class ElementComponent {
65318
64361
  inputStyle: null,
65319
64362
  showLabel: true,
65320
64363
  bookStyle: null,
65321
- direction: 'ltr',
64364
+ direction: "ltr",
65322
64365
  questionStyle: null,
65323
64366
  },
65324
64367
  subText: this.getDefaultSubText(),
65325
64368
  imageData: null,
65326
64369
  boolean: false,
65327
- options: type === 'Dropdown' || type === 'Radio' || type === 'Checkbox' ? [] : null,
65328
- imageSize: type === 'Image' ? { width: 150, height: 150 } : null,
65329
- tableConfig: type === 'Table' ? {
65330
- isNosIndicator: true,
65331
- addInlineRecord: true,
65332
- isPagination: true,
65333
- actionButton: true,
65334
- isDeleteRow: true,
65335
- isEditRow: true,
65336
- searchBar: true,
65337
- isButtons: true,
65338
- itemsPerPage: 10,
65339
- } : null,
64370
+ options: type === "Dropdown" || type === "Radio" || type === "Checkbox"
64371
+ ? []
64372
+ : null,
64373
+ imageSize: type === "Image" ? { width: 150, height: 150 } : null,
64374
+ tableConfig: type === "Table"
64375
+ ? {
64376
+ isNosIndicator: true,
64377
+ addInlineRecord: true,
64378
+ isPagination: true,
64379
+ actionButton: true,
64380
+ isDeleteRow: true,
64381
+ isEditRow: true,
64382
+ searchBar: true,
64383
+ isButtons: true,
64384
+ itemsPerPage: 10,
64385
+ }
64386
+ : null,
65340
64387
  };
65341
64388
  this.formBuilderService.addElement(newElement);
65342
64389
  this.formElements = this.formBuilderService.getElements();
65343
64390
  // SKS19MAR25 fieldsmeta check
65344
- this.formElements = this.formElements.map(ele => {
65345
- if (ele.type === 'Table') {
65346
- ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
65347
- ? ele.fieldsMeta
65348
- : JSON.stringify(ele.fieldsMeta || []);
65349
- }
65350
- return ele;
65351
- });
64391
+ this.formElements = this.updateTableFieldsMeta(this.formElements);
65352
64392
  this.addTable = true;
65353
64393
  }
65354
64394
  }
@@ -65369,7 +64409,7 @@ class ElementComponent {
65369
64409
  queryValueReference: null,
65370
64410
  uniqueKey: null,
65371
64411
  };
65372
- const isEmpty = Object.values(defaultData).every(val => val === null || val === false);
64412
+ const isEmpty = Object.values(defaultData).every((val) => val === null || val === false);
65373
64413
  return isEmpty ? null : defaultData;
65374
64414
  }
65375
64415
  // Remove an element by index
@@ -65377,18 +64417,11 @@ class ElementComponent {
65377
64417
  this.formBuilderService.removeElementComponent(field.id);
65378
64418
  this.formElements = this.formBuilderService.getElements();
65379
64419
  // SKS19MAR25 fieldsmeta check
65380
- this.formElements = this.formElements.map(ele => {
65381
- if (ele.type === 'Table') {
65382
- ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
65383
- ? ele.fieldsMeta
65384
- : JSON.stringify(ele.fieldsMeta || []);
65385
- }
65386
- return ele;
65387
- });
64420
+ this.formElements = this.updateTableFieldsMeta(this.formElements);
65388
64421
  }
65389
64422
  onDragStart(event, index) {
65390
64423
  this.draggedIndex = index;
65391
- event.dataTransfer?.setData('text/plain', index.toString());
64424
+ event.dataTransfer?.setData("text/plain", index.toString());
65392
64425
  }
65393
64426
  // Allow dropping by preventing default
65394
64427
  onDragOver(event, index) {
@@ -65415,39 +64448,30 @@ class ElementComponent {
65415
64448
  toggleBoolean(field) {
65416
64449
  field.boolean = !field.boolean;
65417
64450
  }
65418
- getFontStyles(field) {
64451
+ getBaseStyles(field, includeBorderStyle = false) {
65419
64452
  const styles = {
65420
- 'font-family': field.font || 'Helvetica Neue',
65421
- 'font-weight': field.fontWeight || '400',
65422
- 'font-size': field.fontSize || '14px',
65423
- 'width': field.size ? `${(field.size / 12) * 100}%` : '100%',
65424
- 'text-align': field.textAlign || 'left',
65425
- 'border-radius': '5px',
65426
- 'border-width': field.lineWidth ? `${field.lineWidth}px` : '1px',
65427
- // 'border-style': field.lineStyle?.toLowerCase() || 'solid',
65428
- 'color': field.fontColor || '#000000',
65429
- // 'border-color': field.color || '#EFF8FF',
65430
- 'margin-top': field.paddingTop ? `${field.paddingTop}px` : '0px',
65431
- 'margin-bottom': field.paddingBottom ? `${field.paddingBottom}px` : '10px'
64453
+ "font-family": field?.font || "Helvetica Neue",
64454
+ "font-weight": field?.fontWeight || "400",
64455
+ "font-size": field?.fontSize || "14px",
64456
+ "width": field?.size ? `${(field.size / 12) * 100}%` : "100%",
64457
+ "text-align": field?.textAlign || "left",
64458
+ "border-radius": "5px",
64459
+ "border-width": field?.lineWidth ? `${field.lineWidth}px` : "1px",
64460
+ "color": field?.fontColor || "#000000",
64461
+ "margin-top": field?.paddingTop ? `${field.paddingTop}px` : "0px",
64462
+ "margin-bottom": field?.paddingBottom ? `${field.paddingBottom}px` : "10px",
64463
+ "border-color": field?.color || "#EFF8FF",
65432
64464
  };
64465
+ if (includeBorderStyle) {
64466
+ styles["border-style"] = field?.lineStyle?.toLowerCase() || "solid";
64467
+ }
65433
64468
  return styles;
65434
64469
  }
64470
+ getFontStyles(field) {
64471
+ return this.getBaseStyles(field, false);
64472
+ }
65435
64473
  getLineStyles(field) {
65436
- const styles = {
65437
- 'font-family': field.font || 'Helvetica Neue',
65438
- 'font-weight': field.fontWeight || '400',
65439
- 'font-size': field.fontSize || '14px',
65440
- 'width': field.size ? `${(field.size / 12) * 100}%` : '100%',
65441
- 'text-align': field.textAlign || 'left',
65442
- 'border-radius': '5px',
65443
- 'border-width': field.lineWidth ? `${field.lineWidth}px` : '1px',
65444
- 'border-style': field.lineStyle?.toLowerCase() || 'solid',
65445
- 'color': field.fontColor || '#000000',
65446
- //'border-color': field.color || '#EFF8FF',
65447
- 'margin-top': field.paddingTop ? `${field.paddingTop}px` : '0px',
65448
- 'margin-bottom': field.paddingBottom ? `${field.paddingBottom}px` : '10px'
65449
- };
65450
- return styles;
64474
+ return this.getBaseStyles(field, true);
65451
64475
  }
65452
64476
  // SKS13MAR25 table popup conformation based element add
65453
64477
  onClose() {
@@ -65461,38 +64485,38 @@ class ElementComponent {
65461
64485
  this.isSelectTablePopup = false;
65462
64486
  const elements = [...this.formBuilderService.getElements()];
65463
64487
  // Find the element and update its columns
65464
- const index = elements.findIndex(el => el.id === this.selectedElement.id);
65465
- const rowNum = this.formElements[index].columns ? this.formElements[index].columns?.length : 0;
64488
+ const index = elements.findIndex((el) => el.id === this.selectedElement.id);
64489
+ const rowNum = this.formElements[index].columns
64490
+ ? this.formElements[index].columns?.length
64491
+ : 0;
65466
64492
  const unique_id = this.generateUiId();
65467
64493
  const tableElement = {
65468
64494
  label: `HEADER LABEL ${rowNum}`,
65469
64495
  fieldName: `FIELD NAME${rowNum}`,
65470
64496
  type: this.currentType,
65471
- id: unique_id
64497
+ id: unique_id,
65472
64498
  };
65473
64499
  this.formBuilderService.addTableElement(tableElement, this.selectedFieldIndex);
65474
64500
  this.formElements = this.formBuilderService.getElements();
65475
64501
  // SKS19MAR25 fieldsmeta checking
65476
- this.formElements = this.formElements.map(ele => {
65477
- if (ele.type === 'Table') {
65478
- ele.fieldsMeta = typeof ele.fieldsMeta === 'string'
65479
- ? ele.fieldsMeta
65480
- : JSON.stringify(ele.fieldsMeta || []);
64502
+ this.formElements = this.updateTableFieldsMeta(this.formElements);
64503
+ }
64504
+ updateTableFieldsMeta(elements) {
64505
+ return elements.map((ele) => {
64506
+ if (ele.type === "Table") {
64507
+ ele.fieldsMeta =
64508
+ typeof ele.fieldsMeta === "string"
64509
+ ? ele.fieldsMeta
64510
+ : JSON.stringify(ele.fieldsMeta || []);
65481
64511
  }
65482
64512
  return ele;
65483
64513
  });
65484
- // this.addTableData(unique_id, fieldName)
65485
- }
65486
- addTableData(fieldId, fieldName) {
65487
- // this.formBuilderService.addTablefieldData(tableElement);
65488
64514
  }
65489
64515
  columnSelected(event) {
65490
- // console.log(event)
65491
64516
  // SKS19MAR25 table column update
65492
64517
  this.formBuilderService.setSelectedTableElement(this.selectedFieldIndex, event);
65493
64518
  }
65494
64519
  removeColumn(event) {
65495
- // console.log(event)
65496
64520
  this.formBuilderService.removeSelectedTableElement(this.selectedFieldIndex, event);
65497
64521
  }
65498
64522
  // SKS25MAR25 image add
@@ -65523,11 +64547,17 @@ class ElementComponent {
65523
64547
  });
65524
64548
  }
65525
64549
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
65526
- 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 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}.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:space-between;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}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;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}.element.disabled{opacity:.5;cursor:not-allowed}\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: 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", "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"] }] });
64550
+ 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: 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", "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"] }] });
65527
64551
  }
65528
64552
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
65529
64553
  type: Component,
65530
- args: [{ selector: 'app-element', standalone: true, imports: [QuestionbookComponent, CommonModule, FormsModule, BookletComponent, NxtDatatable], 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 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}.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:space-between;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}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid #5592FD!important;background-color:#eff8ff}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}.sticky-footer-version{position:fixed;bottom:0;padding:10px;text-align:center}.nxt-table-container{display:flex;justify-content:center;align-items:center;width:100%}nxt-datatable{width:100%!important;table-layout:fixed;max-width:100%}.dialog-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.dialog-box{background:#fff;padding:20px;border-radius:5px;text-align:center;width:300px;position:relative}.close-btn-fb{position:absolute;top:4px;right:4px;background:#ff4242;color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:10px;cursor:pointer}.button-container-fb{display:flex;justify-content:flex-end;gap:10px}.yes-btn-fb{background:green;color:#fff;border:none;padding:0 12px;border-radius:5px;cursor:pointer}.no-btn-fb{background:gray;color:#fff;border:none;padding:8px 15px;border-radius:5px;cursor:pointer}.line-element{width:100%;display:flex;justify-content:space-between;align-items:center}.custom-line{width:100%;border:1px solid #000}.logo-container{display:flex;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}.element.disabled{opacity:.5;cursor:not-allowed}\n"] }]
64554
+ args: [{ selector: "app-element", standalone: true, imports: [
64555
+ QuestionbookComponent,
64556
+ CommonModule,
64557
+ FormsModule,
64558
+ BookletComponent,
64559
+ NxtDatatable,
64560
+ ], 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"] }]
65531
64561
  }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { bookletJSON: [{
65532
64562
  type: Input
65533
64563
  }], bookletId: [{