@rangertechnologies/ngnxt 2.1.98 → 2.1.99

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/lib/components/datatable/datatable.component.mjs +15 -2
  2. package/esm2022/lib/pages/builder/element/element.component.mjs +35 -28
  3. package/esm2022/lib/pages/builder/form/form.component.mjs +3 -3
  4. package/esm2022/lib/pages/builder/properties/properties.component.mjs +63 -76
  5. package/esm2022/lib/services/form-builder.service.mjs +20 -12
  6. package/fesm2022/rangertechnologies-ngnxt.mjs +130 -115
  7. package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
  8. package/lib/pages/builder/element/element.component.d.ts +1 -10
  9. package/lib/pages/builder/properties/properties.component.d.ts +1 -36
  10. package/lib/services/form-builder.service.d.ts +8 -6
  11. package/package.json +1 -1
  12. package/rangertechnologies-ngnxt-2.1.99.tgz +0 -0
  13. package/src/lib/style.css +1 -18
  14. package/rangertechnologies-ngnxt-2.1.98.tgz +0 -0
package/fesm2022/rangertechnologies-ngnxt.mjs CHANGED
@@ -10478,10 +10478,10 @@ class FormBuilderService {
10478
10478
  selectedElementSubject = new BehaviorSubject(-1);
10479
10479
  elementComponent = null;
10480
10480
  book;
10481
- formElements$ = this.formElementsSubject.asObservable();
10482
- selectedElement$ = this.selectedElementSubject.asObservable();
10483
10481
  unique_id;
10484
10482
  tempElem;
10483
+ formElements$ = this.formElementsSubject.asObservable();
10484
+ selectedElement$ = this.selectedElementSubject.asObservable();
10485
10485
  // book: { bookQuestionsMap: { unique_id: { subQuestions: any[]; }; }; };
10486
10486
  constructor() {
10487
10487
  // Load saved elements from localStorage
@@ -10503,6 +10503,9 @@ class FormBuilderService {
10503
10503
  }
10504
10504
  // Add a new element to the form
10505
10505
  addElement(element) {
10506
+ if (!element.options) {
10507
+ element.options = []; // options is initialized
10508
+ }
10506
10509
  // const savedFormElements = localStorage.getItem('formElements');
10507
10510
  if (this.formElements.length == 0) {
10508
10511
  // this.formElements = JSON.parse(savedFormElements);
@@ -10535,14 +10538,15 @@ class FormBuilderService {
10535
10538
  }
10536
10539
  this.formElements.push(element);
10537
10540
  // localStorage.setItem('formElements', JSON.stringify(this.formElements));
10538
- // this.formElementsSubject.next([...this.formElements]);
10541
+ this.formElementsSubject.next([...this.formElements]);
10539
10542
  }
10540
10543
  updateElement(index, updates) {
10541
10544
  const elements = [...this.getElements()];
10542
10545
  if (elements[index]) {
10543
10546
  elements[index] = {
10544
10547
  ...elements[index],
10545
- ...updates
10548
+ ...updates,
10549
+ options: updates.options || elements[index].options || [],
10546
10550
  };
10547
10551
  this.formElementsSubject.next(elements);
10548
10552
  }
@@ -10573,19 +10577,23 @@ class FormBuilderService {
10573
10577
  this.selectedElementSubject.next(index);
10574
10578
  }
10575
10579
  getElements() {
10576
- return this.formElements;
10580
+ return this.formElements.map(element => ({
10581
+ ...element,
10582
+ options: element.options || [],
10583
+ }));
10577
10584
  }
10585
+ // In FormBuilderService
10578
10586
  downloadElement() {
10579
10587
  this.book.bookQuestionsMap[this.unique_id].subQuestions = this.formElements;
10588
+ console.log('book', this.book.bookQuestionsMap[this.unique_id].subQuestions);
10580
10589
  let tempElement = {};
10581
10590
  this.formElements.forEach((element) => {
10582
10591
  if (element.type === 'Dropdown' || element.type === 'Radio' || element.type === 'CheckBox') {
10583
- // Initialize the array if it doesn't exist
10584
- if (!tempElement[element.id]) {
10585
- tempElement[element.id] = [];
10586
- }
10587
- // Push the current element into the array
10588
- tempElement[element.id].push(element);
10592
+ //AP 25FEB25 - Store the entire question with its options under its ID
10593
+ tempElement[element.id] = {
10594
+ ...element,
10595
+ options: element.options || []
10596
+ };
10589
10597
  }
10590
10598
  });
10591
10599
  this.book.bookQuestionsMap[this.unique_id]['sqOptions'] = tempElement;
@@ -10623,36 +10631,51 @@ class ElementComponent {
10623
10631
  bookletId;
10624
10632
  dropdownOpen = false; // Tracks whether the dropdown is open or closed
10625
10633
  field;
10626
- // Toggle dropdown visibilitys
10627
- toggleDropdown() {
10628
- this.dropdownOpen = !this.dropdownOpen;
10629
- }
10630
- // Select an option from the dropdown
10631
- selectOption(option) {
10632
- this.field.selectedOption = option;
10633
- this.dropdownOpen = false; // Close the dropdown after selecting an option
10634
- }
10635
10634
  formElements = [];
10635
+ elements = [];
10636
10636
  constructor(formBuilderService) {
10637
10637
  this.formBuilderService = formBuilderService;
10638
10638
  }
10639
10639
  ngOnInit() {
10640
- // Subscribe to the formElements$ observable
10640
+ this.elements = [
10641
+ { "type": "Calendar", "img": "Calendar", "label": "Calendar" },
10642
+ { "type": "CheckBox", "img": "CheckBox", "label": "CheckBox" },
10643
+ { "type": "Email", "img": "Email", "label": "Email" },
10644
+ { "type": "File", "img": "File", "label": "File" },
10645
+ { "type": "Image", "img": "Image", "label": "Image" },
10646
+ { "type": "Numbers", "img": "Number", "label": "Number" },
10647
+ { "type": "List", "img": "List", "label": "List" },
10648
+ { "type": "Radio", "img": "Radio", "label": "Radio" },
10649
+ { "type": "Text", "img": "Text", "label": "Text" },
10650
+ { "type": "Tables", "img": "Table", "label": "Table" },
10651
+ { "type": "Dropdown", "img": "Drop", "label": "Dropdown" },
10652
+ { "type": "TextArea", "img": "TextArea", "label": "TextArea" },
10653
+ { "type": "Label", "img": "Label", "label": "Label" },
10654
+ { "type": "Book", "img": "Book", "label": "Book" },
10655
+ { "type": "Button", "img": "Button", "label": "Button" }
10656
+ ];
10641
10657
  this.formBuilderService.formElements$.subscribe((elements) => {
10642
- this.formElements = elements; // Update the local array with the latest data
10658
+ this.formElements = elements;
10643
10659
  });
10644
10660
  if (this.bookletJSON) {
10645
- // AP-23JAN25 - empty string to clear the local storage
10661
+ // AP-23JAN25 - empty string to clear the local storage localStorage.setItem('status', "edit");
10646
10662
  localStorage.setItem('status', ("edit"));
10647
- localStorage.setItem('unique_id', (this.bookletId));
10663
+ localStorage.setItem('unique_id', this.bookletId);
10648
10664
  this.formElements = [];
10665
+ const bookQuestionsMapKeys = Object.keys(this.bookletJSON.bookQuestionsMap || {});
10666
+ console.log("Keys in bookQuestionsMap:", bookQuestionsMapKeys);
10667
+ //AP 25FEB25 - Assign the first key from bookQuestionsMap to bookletId
10668
+ this.bookletId = bookQuestionsMapKeys[0];
10649
10669
  this.bookletJSON.bookQuestionsMap[this.bookletId].subQuestions.forEach(newElement => {
10670
+ if (this.bookletJSON.sqOptions && this.bookletJSON.sqOptions[newElement.id]) {
10671
+ newElement.options = this.bookletJSON.sqOptions[newElement.id].options;
10672
+ }
10650
10673
  this.formBuilderService.addElement(newElement);
10651
- this.formElements = this.formBuilderService.getElements();
10652
10674
  });
10675
+ this.formElements = this.formBuilderService.getElements();
10653
10676
  }
10654
10677
  else {
10655
- localStorage.setItem('status', ("new"));
10678
+ localStorage.setItem('status', "new");
10656
10679
  }
10657
10680
  }
10658
10681
  drop(event) {
@@ -10704,19 +10727,11 @@ class ElementComponent {
10704
10727
  qbReferenceQuestions: '',
10705
10728
  questionBookSubTitle: '',
10706
10729
  style: '',
10707
- options: type === 'CheckBox' || type === 'Radio' || type === 'Dropdown' ? [
10708
- { label: 'Option 1', value: '', type: 'text', key: 'option1' }
10709
- ] : null,
10730
+ options: type === 'Dropdown' || type === 'Radio' || type === 'CheckBox' ? [] : null,
10710
10731
  };
10711
10732
  this.formBuilderService.addElement(newElement);
10712
10733
  this.formElements = this.formBuilderService.getElements();
10713
10734
  }
10714
- addOption(options) {
10715
- options.push({ label: `Option ${options.length + 1}`, value: '' });
10716
- }
10717
- removeOption(options, index) {
10718
- options.splice(index, 1);
10719
- }
10720
10735
  // Remove an element by index
10721
10736
  removeElement(field, index) {
10722
10737
  this.formBuilderService.removeElementComponent(field.id);
@@ -10726,7 +10741,7 @@ class ElementComponent {
10726
10741
  const styles = {
10727
10742
  'font-family': field.font || 'Helvetica Neue',
10728
10743
  'font-weight': field.fontWeight || '400',
10729
- 'width': `${(field.width || 12) / 12 * 100}%`,
10744
+ 'width': `${(field.size || 12) / 12 * 100}%`,
10730
10745
  'height': `${field.height || 91}px`,
10731
10746
  'text-align': field.textAlign || 'left',
10732
10747
  'border-radius': '5px'
@@ -10752,11 +10767,11 @@ class ElementComponent {
10752
10767
  return styles;
10753
10768
  }
10754
10769
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
10755
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<div class=\"center-frame\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" style=\"padding: 10px;\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\n <div>\n <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1 \n </div>\n \n </div>\n </div>\n </div>\n</div>\n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n <div *ngIf=\"field.type === 'Dropdown'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option value=\"option1\">Option 1</option>\n <option value=\"option2\">Option 2</option>\n <option value=\"option3\">Option 3</option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"['Calendar'].includes(field.type)\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n <!-- List -->\n <!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" style=\"padding: 10px; background-color: whitesmoke; height:150px; width:100%\" (click)=\"selectElement(i)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <textarea\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [style.width.%]=\"100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- AP-29JAN25 radio-button design check -->\n<!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"radio-options\" style=\"display: flex;\">\n <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\n <label>\n <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\n <span>{{ option }}</span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div> \n\n <!-- AP-29JAN25 Image design change -->\n <!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" style=\"padding: 10px; background-color: whitesmoke;\" \n (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload Image' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\n </div>\n </div>\n</div>\n\n <!-- Button -->\n <!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n<div class=\"flex\" style=\"display: flex;\">\n<div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n</div>\n<div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload File' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" style=\"background-color: #ffff;\"/>\n</div>\n</div>\n</div>\n\n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n\n <!-- Book -->\n<div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div>\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n</ng-container>\n </div>\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <div class=\"element\" (click)=\"addElement('Calendar')\">\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\n <div class=\"hover-label\">Calendar</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\n <img src=\"../assets/icons/CheckBox.svg\">\n <div class=\"hover-label\">Check Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Email')\">\n <img src=\"../assets/icons/Email.svg\">\n <div class=\"hover-label\">Email</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('File')\">\n <img src=\"../assets/icons/File.svg\">\n <div class=\"hover-label\">File</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('List')\">\n <img src=\"../assets/icons/List.svg\">\n <div class=\"hover-label\">List</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Tables')\">\n <img src=\"../assets/icons/Table.svg\">\n <div class=\"hover-label\">Tables</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Text')\">\n <img src=\"../assets/icons/Text.svg\">\n <div class=\"hover-label\">Text Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('TextArea')\">\n <img src=\"../assets/icons/TextArea.svg\">\n <div class=\"hover-label\">Text Area</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Numbers')\">\n <img src=\"../assets/icons/Number.svg\">\n <div class=\"hover-label\">Numbers</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\n <img src=\"../assets/icons/Drop.svg\">\n <div class=\"hover-label\">Dropdown</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Image')\">\n <img src=\"../assets/Image.svg\">\n <div class=\"hover-label\">Image</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Radio')\">\n <img src=\"../assets/icons/Radio.svg\">\n <div class=\"hover-label\">Radio</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Label')\">\n <img src=\"../assets/icons/Label.svg\">\n <div class=\"hover-label\">Label</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Book')\">\n <img src=\"../assets/icons/Book.svg\">\n <div class=\"hover-label\">Book</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Button')\">\n <img src=\"../assets/icons/Button.svg\">\n <div class=\"hover-label\">Button</div>\n </div>\n </div>\n\n </div>\n\n\n\n\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}input{width:100%}\n"], dependencies: [{ 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: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
10770
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame row\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n <!-- Form Builder Section All Elements -->\n <div class=\"col-md-3 form-builder\">\n <ng-container *ngFor=\"let element of elements\">\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>\n </ng-container>\n </div>\n \n<div class=\"col-md-9 form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"text\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter text'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input \n type=\"checkbox\" \n [id]=\"option.value + i\"\n [name]=\"field.id\"\n [value]=\"option.value\"\n class=\"checkbox-input\"\n >\n <label [for]=\"option.value + i\" class=\"checkbox-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n <!-- AP-29JAN25 radio-button design check -->\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"radio-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input \n type=\"radio\" \n [id]=\"'radio-' + field.id + '-' + j\"\n [name]=\"'radio-group-' + field.id\" \n [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\"\n class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"text-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\">\n {{ option.value }}\n </option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" \n class=\"calendar-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" \n class=\"email-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"email\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter email'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n \n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" \n class=\"number-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"number\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter number'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" \n class=\"text-area-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" \n (click)=\"removeElement(field, i)\" \n class=\"delete-icon\" />\n </div>\n \n <textarea class=\"custom-textarea\"\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n <!-- AP-29JAN25 Image design change -->\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n\n <!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n</div>\n</div>\n</div>\n\n <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".form-builder{width:250px;background-color:#fff;padding:10px;border-radius:10px;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:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.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:14px;font-weight:500;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}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.text-field-container,.number-field-container,.email-field-container,.calendar-field-container,.checkbox-field-container,.radio-field-container,.text-area-container{padding:10px;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px}.field-wrapper{display:flex;align-items:center}.field-content{width:97%}.label-container{display:flex;justify-content:space-between;align-items:center;font-weight:700}.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:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{overflow-y:auto;display:flex;flex-wrap:wrap;gap:10px}.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}.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{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.label-container label{font-size:16px;font-weight:600}.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}\n"], dependencies: [{ 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: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
10756
10771
  }
10757
10772
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
10758
10773
  type: Component,
10759
- args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n<div class=\"center-frame\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n <div *ngIf=\"field.type === 'Text'\" style=\"padding: 10px;\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n </div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"checkbox-container\" style=\"width:100%; background-color:#ffff\">\n <div>\n <input type=\"checkbox\" name=\"option1\" value=\"1\"> Option 1 \n </div>\n \n </div>\n </div>\n </div>\n</div>\n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n <div *ngIf=\"field.type === 'Dropdown'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option value=\"option1\">Option 1</option>\n <option value=\"option2\">Option 2</option>\n <option value=\"option3\">Option 3</option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"['Calendar'].includes(field.type)\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n <!-- List -->\n <!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" style=\"padding: 10px; background-color: whitesmoke; height:150px; width:100%\" (click)=\"selectElement(i)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <textarea\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [style.width.%]=\"100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- AP-29JAN25 radio-button design check -->\n<!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <div class=\"radio-options\" style=\"display: flex;\">\n <div *ngFor=\"let option of field.options\" class=\"radio-item\" style=\"margin-right: 15px;\">\n <label>\n <input type=\"radio\" name=\"{{ field.questionText }}\" [(ngModel)]=\"field.value\" [value]=\"option\" />\n <span>{{ option }}</span>\n </label>\n </div>\n </div>\n </div>\n </div>\n </div> \n\n <!-- AP-29JAN25 Image design change -->\n <!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" style=\"padding: 10px; background-color: whitesmoke;\" \n (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n </div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload Image' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" style=\"background-color: #ffff;\"/>\n </div>\n </div>\n</div>\n\n <!-- Button -->\n <!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n<div class=\"flex\" style=\"display: flex;\">\n<div class=\"all-dots\">\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\n</div>\n<div style=\"width: 97%;\">\n <div class=\"flex lab-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Upload File' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" style=\"background-color: #ffff;\"/>\n</div>\n</div>\n</div>\n\n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n\n <!-- Book -->\n<div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div>\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n</ng-container>\n </div>\n <!-- Form Builder Section All Elements -->\n <div class=\"form-builder\">\n <div class=\"element\" (click)=\"addElement('Calendar')\">\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\n <div class=\"hover-label\">Calendar</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\n <img src=\"../assets/icons/CheckBox.svg\">\n <div class=\"hover-label\">Check Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Email')\">\n <img src=\"../assets/icons/Email.svg\">\n <div class=\"hover-label\">Email</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('File')\">\n <img src=\"../assets/icons/File.svg\">\n <div class=\"hover-label\">File</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('List')\">\n <img src=\"../assets/icons/List.svg\">\n <div class=\"hover-label\">List</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Tables')\">\n <img src=\"../assets/icons/Table.svg\">\n <div class=\"hover-label\">Tables</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Text')\">\n <img src=\"../assets/icons/Text.svg\">\n <div class=\"hover-label\">Text Box</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('TextArea')\">\n <img src=\"../assets/icons/TextArea.svg\">\n <div class=\"hover-label\">Text Area</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Numbers')\">\n <img src=\"../assets/icons/Number.svg\">\n <div class=\"hover-label\">Numbers</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\n <img src=\"../assets/icons/Drop.svg\">\n <div class=\"hover-label\">Dropdown</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Image')\">\n <img src=\"../assets/Image.svg\">\n <div class=\"hover-label\">Image</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Radio')\">\n <img src=\"../assets/icons/Radio.svg\">\n <div class=\"hover-label\">Radio</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Label')\">\n <img src=\"../assets/icons/Label.svg\">\n <div class=\"hover-label\">Label</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Book')\">\n <img src=\"../assets/icons/Book.svg\">\n <div class=\"hover-label\">Book</div>\n </div>\n\n <div class=\"element\" (click)=\"addElement('Button')\">\n <img src=\"../assets/icons/Button.svg\">\n <div class=\"hover-label\">Button</div>\n </div>\n </div>\n\n </div>\n\n\n\n\n", styles: [".center-frame{padding:26px;box-sizing:border-box;background-color:#edf1f5}.form-builder{display:flex;flex-wrap:wrap;justify-content:space-between;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:85vh;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.dropdown{width:100%;padding:8px;font-size:16px;cursor:pointer}.dropdown:focus{border-color:#007bff;outline:none}input{width:100%}\n"] }]
10774
+ args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame row\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n <!-- Form Builder Section All Elements -->\n <div class=\"col-md-3 form-builder\">\n <ng-container *ngFor=\"let element of elements\">\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>\n </ng-container>\n </div>\n \n<div class=\"col-md-9 form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"text\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter text'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input \n type=\"checkbox\" \n [id]=\"option.value + i\"\n [name]=\"field.id\"\n [value]=\"option.value\"\n class=\"checkbox-input\"\n >\n <label [for]=\"option.value + i\" class=\"checkbox-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n <!-- AP-29JAN25 radio-button design check -->\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"radio-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input \n type=\"radio\" \n [id]=\"'radio-' + field.id + '-' + j\"\n [name]=\"'radio-group-' + field.id\" \n [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\"\n class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"text-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\">\n {{ option.value }}\n </option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" \n class=\"calendar-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" \n class=\"email-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"email\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter email'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n \n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" \n class=\"number-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"number\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter number'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" \n class=\"text-area-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" \n (click)=\"removeElement(field, i)\" \n class=\"delete-icon\" />\n </div>\n \n <textarea class=\"custom-textarea\"\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n <!-- AP-29JAN25 Image design change -->\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n\n <!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n</div>\n</div>\n</div>\n\n <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".form-builder{width:250px;background-color:#fff;padding:10px;border-radius:10px;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:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.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:14px;font-weight:500;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}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.text-field-container,.number-field-container,.email-field-container,.calendar-field-container,.checkbox-field-container,.radio-field-container,.text-area-container{padding:10px;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px}.field-wrapper{display:flex;align-items:center}.field-content{width:97%}.label-container{display:flex;justify-content:space-between;align-items:center;font-weight:700}.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:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{overflow-y:auto;display:flex;flex-wrap:wrap;gap:10px}.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}.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{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.label-container label{font-size:16px;font-weight:600}.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}\n"] }]
10760
10775
  }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
10761
10776
  type: Output
10762
10777
  }], formContainer: [{
@@ -10771,13 +10786,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
10771
10786
  class PropertiesComponent {
10772
10787
  http;
10773
10788
  formBuilderService;
10774
- // selectedElement: any;
10775
- colorWheel;
10776
- ctx;
10777
10789
  formButtonHandler = new EventEmitter();
10778
10790
  selectedOption = '';
10779
10791
  selectedElementIndex = -1;
10780
- // @Input() selectedElement: any;
10781
10792
  selectedElementType = '';
10782
10793
  selectedAlign = 'align-left'; // Add this property
10783
10794
  selectedStyles = []; // Using array since multiple styles can be selected
@@ -10819,7 +10830,6 @@ class PropertiesComponent {
10819
10830
  return this.selectedElement?.styles?.includes(value) || false;
10820
10831
  }
10821
10832
  elementProperties = {
10822
- // Add other element types here similarly
10823
10833
  'Text': {
10824
10834
  elementProps: [
10825
10835
  // questionText - Label-follow all element properties
@@ -10840,24 +10850,24 @@ class PropertiesComponent {
10840
10850
  { value: '700', label: '700-Bold' }
10841
10851
  ] },
10842
10852
  // { label: 'Size', unit: 'PX', type: 'number', key: 'size' },
10843
- { label: 'Align', type: 'align', key: 'textAlign',
10844
- options: [
10845
- { value: 'left', icon: 'textalign-left' },
10846
- { value: 'center', icon: 'align-center' },
10847
- { value: 'right', icon: 'align-right' },
10848
- { value: 'justifyleft', icon: 'align-justifyleft' },
10849
- { value: 'justifyright', icon: 'align-justifyright' }
10850
- ] },
10851
- { label: 'Style', type: 'style', key: 'styles',
10852
- options: [
10853
- { value: 'italic', icon: 'italic' },
10854
- { value: 'bold', icon: 'bold' },
10855
- { value: 'underline', icon: 'underline' },
10856
- { value: 'texticon', icon: 'texticon' },
10857
- { value: 'capitalize', icon: 'capitalize' },
10858
- { value: 'resize', icon: 'resize' }
10859
- ] },
10860
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' }
10853
+ // { label: 'Align', type: 'align', key: 'textAlign',
10854
+ // options: [
10855
+ // { value: 'left', icon: 'textalign-left' },
10856
+ // { value: 'center', icon: 'align-center' },
10857
+ // { value: 'right', icon: 'align-right' },
10858
+ // { value: 'justifyleft', icon: 'align-justifyleft' },
10859
+ // { value: 'justifyright', icon: 'align-justifyright' }
10860
+ // ] },
10861
+ // { label: 'Style', type: 'style',key: 'styles',
10862
+ // options: [
10863
+ // { value: 'italic', icon: 'italic' },
10864
+ // { value: 'bold', icon: 'bold' },
10865
+ // { value: 'underline', icon: 'underline' },
10866
+ // { value: 'texticon', icon: 'texticon' },
10867
+ // { value: 'capitalize', icon: 'capitalize' },
10868
+ // { value: 'resize', icon: 'resize' }
10869
+ // ] },
10870
+ { label: 'Field Size', type: 'fieldSize', key: 'size' }
10861
10871
  ],
10862
10872
  fieldProps: [
10863
10873
  { label: 'Field Required', type: 'radio' },
@@ -10873,21 +10883,18 @@ class PropertiesComponent {
10873
10883
  { label: 'Place Holder', placeholder: 'Enter Text ', type: 'text', key: 'question' },
10874
10884
  { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
10875
10885
  { label: '', type: 'toggleGroup' },
10876
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10886
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10877
10887
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10878
10888
  ],
10879
10889
  fieldProps: [
10880
10890
  { label: 'Field Required', type: 'radio' },
10881
10891
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
10882
10892
  {
10883
- label: 'Chk Options',
10884
- type: 'optionsGroup',
10885
- key: 'chkOptions',
10886
- options: [
10887
- { label: 'Option 1', value: '', type: 'text', key: 'option1' },
10888
- ],
10889
- addOptionLabel: 'Add Variant', // Text for the plus icon
10890
- icon: 'plus' // Icon for adding options
10893
+ label: 'Options',
10894
+ type: 'checkbox',
10895
+ key: 'options',
10896
+ addOptionLabel: 'Add Option',
10897
+ icon: 'plus'
10891
10898
  },
10892
10899
  { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
10893
10900
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
@@ -10900,7 +10907,7 @@ class PropertiesComponent {
10900
10907
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10901
10908
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10902
10909
  { label: '', type: 'toggleGroup' },
10903
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10910
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10904
10911
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10905
10912
  ],
10906
10913
  fieldProps: [
@@ -10917,7 +10924,7 @@ class PropertiesComponent {
10917
10924
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'placeholder' },
10918
10925
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10919
10926
  { label: '', type: 'toggleGroup' },
10920
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10927
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10921
10928
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10922
10929
  ],
10923
10930
  fieldProps: [
@@ -10934,7 +10941,7 @@ class PropertiesComponent {
10934
10941
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10935
10942
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10936
10943
  { label: '', type: 'toggleGroup' },
10937
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10944
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10938
10945
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10939
10946
  ],
10940
10947
  fieldProps: [
@@ -10959,7 +10966,7 @@ class PropertiesComponent {
10959
10966
  { label: 'Archives (ZIP, RAR, Git-hub)', value: 'application/zip,application/x-rar-compressed,application/x-git', extensions: ['.zip', '.rar', '.git'] }
10960
10967
  ] },
10961
10968
  { label: '', type: 'toggleGroup' },
10962
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10969
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10963
10970
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10964
10971
  ],
10965
10972
  fieldProps: [
@@ -10976,7 +10983,7 @@ class PropertiesComponent {
10976
10983
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10977
10984
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10978
10985
  { label: '', type: 'toggleGroup' },
10979
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
10986
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10980
10987
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10981
10988
  ],
10982
10989
  fieldProps: [
@@ -10986,13 +10993,14 @@ class PropertiesComponent {
10986
10993
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
10987
10994
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
10988
10995
  ]
10989
- }, 'TextArea': {
10996
+ },
10997
+ 'TextArea': {
10990
10998
  elementProps: [
10991
10999
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
10992
11000
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10993
11001
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10994
11002
  { label: '', type: 'toggleGroup' },
10995
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11003
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
10996
11004
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10997
11005
  ],
10998
11006
  fieldProps: [
@@ -11002,13 +11010,14 @@ class PropertiesComponent {
11002
11010
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11003
11011
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11004
11012
  ]
11005
- }, 'Numbers': {
11013
+ },
11014
+ 'Numbers': {
11006
11015
  elementProps: [
11007
11016
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11008
11017
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11009
11018
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11010
11019
  { label: '', type: 'toggleGroup' },
11011
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11020
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11012
11021
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11013
11022
  ],
11014
11023
  fieldProps: [
@@ -11018,39 +11027,38 @@ class PropertiesComponent {
11018
11027
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11019
11028
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11020
11029
  ]
11021
- }, 'Dropdown': {
11030
+ },
11031
+ 'Dropdown': {
11022
11032
  elementProps: [
11023
11033
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11024
11034
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11025
11035
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11026
11036
  { label: '', type: 'toggleGroup' },
11027
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11037
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11028
11038
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11029
11039
  ],
11030
11040
  fieldProps: [
11031
11041
  { label: 'Field Required', type: 'radio' },
11032
11042
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
11033
11043
  {
11034
- label: 'Chk Options',
11035
- type: 'optionsGroup',
11036
- key: 'chkOptions',
11037
- options: [
11038
- { label: 'Option 1', value: '', type: 'text', key: 'option1' },
11039
- ],
11040
- addOptionLabel: 'Add Variant', // Text for the plus icon
11041
- icon: 'plus' // Icon for adding options
11044
+ label: 'Options',
11045
+ type: 'dropdown',
11046
+ key: 'options',
11047
+ addOptionLabel: 'Add Variant',
11048
+ icon: 'plus'
11042
11049
  },
11043
11050
  { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11044
11051
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11045
11052
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' },
11046
11053
  ]
11047
- }, 'Image': {
11054
+ },
11055
+ 'Image': {
11048
11056
  elementProps: [
11049
11057
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11050
11058
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11051
11059
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11052
11060
  { label: '', type: 'toggleGroup' },
11053
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11061
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11054
11062
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11055
11063
  ],
11056
11064
  fieldProps: [
@@ -11060,28 +11068,25 @@ class PropertiesComponent {
11060
11068
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11061
11069
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11062
11070
  ]
11063
- }, 'Radio': {
11071
+ },
11072
+ 'Radio': {
11064
11073
  elementProps: [
11065
11074
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11066
11075
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11067
11076
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11068
11077
  { label: '', type: 'toggleGroup' },
11069
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11078
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11070
11079
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11071
11080
  ],
11072
11081
  fieldProps: [
11073
11082
  { label: 'Field Required', type: 'radio' },
11074
11083
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
11075
11084
  {
11076
- label: 'Radio Options', // Updated label to reflect radio context
11077
- type: 'optionsGroup',
11078
- key: 'radioOptions', // Updated key for radio context
11079
- options: [
11080
- { label: 'Option 1', value: '', type: 'text', key: 'option1' },
11081
- { label: 'Option 2', value: '', type: 'text', key: 'option2' },
11082
- ],
11083
- addOptionLabel: 'Add Option', // Updated label for add button
11084
- icon: 'plus', // Icon for adding options
11085
+ label: 'Options',
11086
+ type: 'radio',
11087
+ key: 'options',
11088
+ addOptionLabel: 'Add Option',
11089
+ icon: 'plus'
11085
11090
  },
11086
11091
  { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11087
11092
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
@@ -11094,7 +11099,7 @@ class PropertiesComponent {
11094
11099
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11095
11100
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11096
11101
  { label: '', type: 'toggleGroup' },
11097
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11102
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11098
11103
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11099
11104
  ],
11100
11105
  fieldProps: [
@@ -11104,13 +11109,14 @@ class PropertiesComponent {
11104
11109
  { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11105
11110
  { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11106
11111
  ]
11107
- }, 'Button': {
11112
+ },
11113
+ 'Button': {
11108
11114
  elementProps: [
11109
11115
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11110
11116
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11111
11117
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11112
11118
  { label: '', type: 'toggleGroup' },
11113
- { label: 'Field Size', type: 'fieldSize', key: 'fieldSize' },
11119
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11114
11120
  { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11115
11121
  ],
11116
11122
  fieldProps: [
@@ -11201,7 +11207,6 @@ class PropertiesComponent {
11201
11207
  addOption(options) {
11202
11208
  options.push({ label: '', value: '' });
11203
11209
  }
11204
- // Function to remove an option from prop options
11205
11210
  removeOption(options, index) {
11206
11211
  options.splice(index, 1);
11207
11212
  }
@@ -11212,15 +11217,12 @@ class PropertiesComponent {
11212
11217
  this.formButtonHandler.emit(this.formBuilderService.downloadElement());
11213
11218
  }
11214
11219
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1$1.HttpClient }, { token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
11215
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Element Properties</h1>\n <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div>\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">\n {{ errorMessage }}\n </div>\n <!-- Element Properties -->\n <details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"\n />\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\n {{ selectedElement.helpText }}\n </div>\n\n\n <!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\n class=\"font-selection1\"\n [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\n class=\"file \"\n[value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n{{ option.label }}\n</option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\n class=\"font-weight\"\n [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $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 \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement?.isHide\"\n (change)=\"onToggleChange('isHide', $event)\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n <!-- Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\"\n class=\"align-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\n <label>{{ prop.label }}</label>\n <input\n type=\"number\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n class=\"size-input\"\n />\n <span class=\"size-unit\">{{ prop.unit }}</span>\n </div>\n\n\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\"\n class=\"style-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n<!-- Field Size Controls -->\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input\n type=\"number\"\n [value]=\"selectedElement?.width\"\n (input)=\"updateProperty('width', $event.target.value)\"\n class=\"size-input\"\n\n />\n\n </div>\n </div>\n</div>\n</div>\n </div>\n </ng-container>\n </div>\n </details>\n\n <!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n class=\"field-input\"\n />\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n\n\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"selectedElement.required\"\n (change)=\"onRequiredChange(true)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-label\"\n >\n Required\n </label>\n </div>\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"!selectedElement.required\"\n (change)=\"onRequiredChange(false)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-sm text-gray-400\"\n >\n Not Required\n </label>\n </div>\n </div>\n</div>\n</div>\n <!-- Chk Options Group -->\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\n <div\n *ngFor=\"let option of prop.options; let i = index\"\n class=\"option-items\"\n >\n <!-- Option Input -->\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].label\"\n placeholder=\"Option {{ i + 1 }}\"\n class=\"options\"\n />\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].value\"\n placeholder=\"Value\"\n class=\"values\"\n />\n <!-- Remove Button -->\n <div class=\"remove\">\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\n </div>\n <!-- Add Button -->\n <button\n type=\"button\"\n class=\"add-btn\"\n (click)=\"addOption(prop.options)\"\n >\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span></div>\n </button>\n</div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n </div>\n</details>\n</div>\n</div>\n", styles: [".all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.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:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ 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: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
11220
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Element Properties</h1>\n <!-- AP 25FEB25 - not used -->\n <!-- <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div> -->\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(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<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n</div>\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [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'\" class=\"font-style\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [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'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n </div>\n </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{width:100%;max-width:600px;margin:0 auto;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f4f4f4;border-radius:6px;margin-bottom:15px}.header-title{font-size:18px;font-weight:500;color:#333}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:10px}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:5px}.inner-content{padding:10px 0}label{font-size:14px;color:#333;margin-bottom:5px}input[type=text],input[type=number],select{width:100%;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;outline:none;transition:.3s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#007bff}button{padding:8px 12px;border:none;border-radius:4px;background:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:.3s}button:hover{background:#0056b3}.toggle-group{display:flex;align-items:center;gap:15px}.toggle-item{display:flex;align-items:center;gap:8px}.switch{position:relative;width:40px;height:20px}.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:19px;width:19px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.radio-item{display:flex;align-items:center;gap:15px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:10px}.options{width:calc(100% - 30px)}.field-size-controls{display:flex;align-items:center;gap:10px}.size-input{width:100px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:15px}.design-footer .btn{background:#007bff;color:#fff;padding:8px 15px;border-radius:4px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:10px}.design-header{flex-direction:column;align-items:flex-start}.toggle-group{flex-direction:column;gap:10px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:10px}}\n"], dependencies: [{ 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: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
11216
11221
  }
11217
11222
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
11218
11223
  type: Component,
11219
- args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Element Properties</h1>\n <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div>\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">\n {{ errorMessage }}\n </div>\n <!-- Element Properties -->\n <details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n <!-- Text Input -->\n <input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"\n />\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\n {{ selectedElement.helpText }}\n </div>\n\n\n <!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\n class=\"font-selection1\"\n [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\n class=\"file \"\n[value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\n{{ option.label }}\n</option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\n class=\"font-weight\"\n [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $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 \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input\n type=\"checkbox\"\n [checked]=\"selectedElement?.isHide\"\n (change)=\"onToggleChange('isHide', $event)\"\n />\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n <!-- Text Align Buttons -->\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onAlignSelect(option.value)\"\n [class.active]=\"selectedElement?.textAlign === option.value\"\n class=\"align-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\n <label>{{ prop.label }}</label>\n <input\n type=\"number\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n class=\"size-input\"\n />\n <span class=\"size-unit\">{{ prop.unit }}</span>\n </div>\n\n\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button\n *ngFor=\"let option of prop.options\"\n (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\"\n class=\"style-btn\"\n [title]=\"option.value\"\n >\n <img\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\n [alt]=\"option.value\"\n class=\"icon-size\"\n />\n </button>\n </div>\n\n<!-- Field Size Controls -->\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input\n type=\"number\"\n [value]=\"selectedElement?.width\"\n (input)=\"updateProperty('width', $event.target.value)\"\n class=\"size-input\"\n\n />\n\n </div>\n </div>\n</div>\n</div>\n </div>\n </ng-container>\n </div>\n </details>\n\n <!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input\n *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n class=\"field-input\"\n />\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n\n\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"selectedElement.required\"\n (change)=\"onRequiredChange(true)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-label\"\n >\n Required\n </label>\n </div>\n <div class=\"flex-items\">\n <input\n type=\"radio\"\n [checked]=\"!selectedElement.required\"\n (change)=\"onRequiredChange(false)\"\n name=\"required\"\n class=\"radio-input\"\n />\n <label\n class=\"text-sm text-gray-400\"\n >\n Not Required\n </label>\n </div>\n </div>\n</div>\n</div>\n <!-- Chk Options Group -->\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\n <div\n *ngFor=\"let option of prop.options; let i = index\"\n class=\"option-items\"\n >\n <!-- Option Input -->\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].label\"\n placeholder=\"Option {{ i + 1 }}\"\n class=\"options\"\n />\n <input\n type=\"text\"\n [(ngModel)]=\"prop.options[i].value\"\n placeholder=\"Value\"\n class=\"values\"\n />\n <!-- Remove Button -->\n <div class=\"remove\">\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\n </div>\n <!-- Add Button -->\n <button\n type=\"button\"\n class=\"add-btn\"\n (click)=\"addOption(prop.options)\"\n >\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span></div>\n </button>\n</div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n </div>\n</details>\n</div>\n</div>\n", styles: [".all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.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:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
11220
- }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { colorWheel: [{
11221
- type: ViewChild,
11222
- args: ['colorWheel']
11223
- }], formButtonHandler: [{
11224
+ args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Element Properties</h1>\n <!-- AP 25FEB25 - not used -->\n <!-- <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div> -->\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(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<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n</div>\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [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'\" class=\"font-style\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [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'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n </div>\n </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{width:100%;max-width:600px;margin:0 auto;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f4f4f4;border-radius:6px;margin-bottom:15px}.header-title{font-size:18px;font-weight:500;color:#333}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:10px}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:5px}.inner-content{padding:10px 0}label{font-size:14px;color:#333;margin-bottom:5px}input[type=text],input[type=number],select{width:100%;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;outline:none;transition:.3s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#007bff}button{padding:8px 12px;border:none;border-radius:4px;background:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:.3s}button:hover{background:#0056b3}.toggle-group{display:flex;align-items:center;gap:15px}.toggle-item{display:flex;align-items:center;gap:8px}.switch{position:relative;width:40px;height:20px}.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:19px;width:19px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.radio-item{display:flex;align-items:center;gap:15px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:10px}.options{width:calc(100% - 30px)}.field-size-controls{display:flex;align-items:center;gap:10px}.size-input{width:100px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:15px}.design-footer .btn{background:#007bff;color:#fff;padding:8px 15px;border-radius:4px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:10px}.design-header{flex-direction:column;align-items:flex-start}.toggle-group{flex-direction:column;gap:10px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:10px}}\n"] }]
11225
+ }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { formButtonHandler: [{
11224
11226
  type: Output
11225
11227
  }], selectedElementType: [{
11226
11228
  type: Input
@@ -11268,11 +11270,11 @@ class FormComponent {
11268
11270
  this.formButtonHandler.emit(event);
11269
11271
  }
11270
11272
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11271
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n <!-- app-element Component -->\n <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n ", styles: [""], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
11273
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n <!-- app-element Component -->\n <app-element class=\"col-md-9\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties class=\"col-md-3\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n ", styles: [".form-container{display:flex;width:100%;height:100vh}app-element{width:100%;height:100vh;overflow-y:auto;padding:10px;border-top:10px solid #86A8CD;border-bottom:10px solid #86A8CD}app-properties{height:100vh;overflow-y:auto;padding:10px;border:10px solid #86A8CD}\n"], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
11272
11274
  }
11273
11275
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
11274
11276
  type: Component,
11275
- args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n <!-- app-element Component -->\n <app-element class=\"col-md-8\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties class=\"col-md-4\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n " }]
11277
+ args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container row\">\n <!-- app-element Component -->\n <app-element class=\"col-md-9\" [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties class=\"col-md-3\" (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n ", styles: [".form-container{display:flex;width:100%;height:100vh}app-element{width:100%;height:100vh;overflow-y:auto;padding:10px;border-top:10px solid #86A8CD;border-bottom:10px solid #86A8CD}app-properties{height:100vh;overflow-y:auto;padding:10px;border:10px solid #86A8CD}\n"] }]
11276
11278
  }], propDecorators: { bookletJSON: [{
11277
11279
  type: Input
11278
11280
  }], bookletId: [{
@@ -12096,6 +12098,11 @@ class NxtDatatable {
12096
12098
  this.originalData = [...this.data];
12097
12099
  this.sFilterData = [...this.data];
12098
12100
  this.dataSource.data = this.originalData;
12101
+ this.pageSize = this.pagination?.pageSize ? this.pagination['pageSize'] : 10;
12102
+ this.pageIndex = this.pagination?.pageIndex ? this.pagination['pageIndex'] : 1;
12103
+ this.totalRecords = this.pagination?.totalRecords ? this.pagination['totalRecords'] : undefined;
12104
+ this.pageSizeOptions = this.pagination?.pageSizeOptions ? this.pagination['pageSizeOptions'] : ['5', '10', '25', '50', '100', '200'];
12105
+ this.pagination === undefined ? this.configPagination = false : this.configPagination = true;
12099
12106
  this.selection = new SelectionModel(true, []);
12100
12107
  if (!this.totalRecords && this.data) {
12101
12108
  this.dataSource.data = this.data?.slice(0, 10);
@@ -12605,8 +12612,16 @@ class NxtDatatable {
12605
12612
  }
12606
12613
  // SKS15FEB25 for close search filter box
12607
12614
  closefilter() {
12615
+ this.pageSize = 10;
12616
+ this.pageIndex = 1;
12608
12617
  this.filterDataArray[this.selectedFilter] = [];
12609
- this.filterRetain(this.filterDataArray);
12618
+ this.isResized = false;
12619
+ if (!this.configPagination || this.dataSource.data.length === this.totalRecords) {
12620
+ this.filterRetain(this.filterDataArray);
12621
+ }
12622
+ else {
12623
+ this.NxtTableEmit.emit({ pagination: { pageSize: 10, pageIndex: 1 }, tableSearch: { fields: this.displayedColumns, value: this.searchBoxValue }, searchFilterData: this.filterDataArray, sort: { column: this.currentSortColumn, direction: this.currentSortDirection } });
12624
+ }
12610
12625
  }
12611
12626
  // SKS15FEB25 search filter box checkbox retain
12612
12627
  isSelected(event) {