@rangertechnologies/ngnxt 2.1.103 → 2.1.105

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 (12) hide show
  1. package/esm2022/lib/pages/builder/element/element.component.mjs +66 -55
  2. package/esm2022/lib/pages/builder/form/form.component.mjs +1 -1
  3. package/esm2022/lib/pages/builder/properties/properties.component.mjs +103 -95
  4. package/esm2022/lib/services/form-builder.service.mjs +2 -2
  5. package/fesm2022/rangertechnologies-ngnxt.mjs +168 -149
  6. package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
  7. package/lib/pages/builder/element/element.component.d.ts +10 -5
  8. package/lib/pages/builder/properties/properties.component.d.ts +113 -86
  9. package/package.json +1 -1
  10. package/rangertechnologies-ngnxt-2.1.105.tgz +0 -0
  11. package/src/lib/style.css +8 -0
  12. package/rangertechnologies-ngnxt-2.1.103.tgz +0 -0
package/fesm2022/rangertechnologies-ngnxt.mjs CHANGED
@@ -10630,7 +10630,7 @@ class FormBuilderService {
10630
10630
  };
10631
10631
  }
10632
10632
  });
10633
- this.book.bookQuestionsMap[this.unique_id]['sqOptions'] = tempElement;
10633
+ this.book.sqOptions = tempElement;
10634
10634
  return this.book;
10635
10635
  }
10636
10636
  // Remove an element by ID
@@ -10659,34 +10659,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
10659
10659
  // AP 22JAN25 - form preview and All form elements
10660
10660
  class ElementComponent {
10661
10661
  formBuilderService;
10662
- elementButtonClicked = new EventEmitter();
10663
- formContainer;
10662
+ //@Output() elementButtonClicked = new EventEmitter<string>();
10664
10663
  bookletJSON;
10665
10664
  bookletId;
10666
10665
  field;
10667
10666
  formElements = [];
10668
10667
  elements = [];
10669
10668
  bookId;
10669
+ sections = {
10670
+ basic: true, // Basic Elements open by default
10671
+ advanced: false // Advanced Elements closed by default
10672
+ };
10673
+ basicElements = [];
10674
+ advancedElements = [];
10675
+ //subscription: any;
10670
10676
  constructor(formBuilderService) {
10671
10677
  this.formBuilderService = formBuilderService;
10672
10678
  }
10679
+ // AP-06MAR25 New Design Change Elements Basic , Advanced
10673
10680
  ngOnInit() {
10674
- this.elements = [
10675
- { "type": "Calendar", "img": "Calendar", "label": "Calendar" },
10676
- { "type": "CheckBox", "img": "CheckBox", "label": "CheckBox" },
10677
- { "type": "Email", "img": "Email", "label": "Email" },
10678
- { "type": "File", "img": "File", "label": "File" },
10679
- { "type": "Image", "img": "Image", "label": "Image" },
10680
- { "type": "Number", "img": "Number", "label": "Number" },
10681
- { "type": "List", "img": "List", "label": "List" },
10682
- { "type": "Radio", "img": "Radio", "label": "Radio" },
10681
+ this.basicElements = [
10682
+ { "type": "Heading", "img": "Vector", "label": "Heading" },
10683
10683
  { "type": "Text", "img": "Text", "label": "Text" },
10684
- { "type": "Tables", "img": "Table", "label": "Table" },
10685
- { "type": "Dropdown", "img": "Drop", "label": "Dropdown" },
10686
- { "type": "TextArea", "img": "TextArea", "label": "TextArea" },
10684
+ { "type": "TextArea", "img": "TextArea", "label": "Text Area" },
10685
+ { "type": "Paragraph", "img": "Paragraph", "label": "Paragraph" },
10686
+ { "type": "Number", "img": "Number", "label": "Number" },
10687
10687
  { "type": "Label", "img": "Label", "label": "Label" },
10688
- { "type": "Book", "img": "Book", "label": "Book" },
10689
- { "type": "Button", "img": "Button", "label": "Button" }
10688
+ { "type": "Image", "img": "Image", "label": "Image" },
10689
+ { "type": "Button", "img": "Button", "label": "Button" },
10690
+ { "type": "Email", "img": "Email", "label": "Email" }
10691
+ ];
10692
+ this.advancedElements = [
10693
+ { "type": "Calendar", "img": "Calendar", "label": "Calendar" },
10694
+ { "type": "CustomSearch", "img": "Search", "label": "Custom / Search" },
10695
+ { "type": "Date", "img": "Date", "label": "Date" },
10696
+ { "type": "Time", "img": "Time", "label": "Time" },
10697
+ { "type": "File", "img": "File", "label": "Files" },
10698
+ { "type": "Table", "img": "Table", "label": "Table" },
10699
+ { "type": "CheckBox", "img": "CheckBox", "label": "CheckBox" },
10700
+ { "type": "MultiSelect", "img": "MultiSelect", "label": "Multi Select" },
10701
+ { "type": "Dropdown", "img": "Drop", "label": "Dropdown" }
10690
10702
  ];
10691
10703
  this.formBuilderService.formElements$.subscribe((elements) => {
10692
10704
  this.formElements = elements;
@@ -10698,6 +10710,13 @@ class ElementComponent {
10698
10710
  localStorage.setItem('status', "new");
10699
10711
  }
10700
10712
  }
10713
+ // Add these methods
10714
+ toggleSection(section) {
10715
+ this.sections[section] = !this.sections[section];
10716
+ }
10717
+ isSectionOpen(section) {
10718
+ return this.sections[section];
10719
+ }
10701
10720
  // AP - 26FEB25 - Added ngOnChanges to handle changes in bookletJSON
10702
10721
  ngOnChanges(changes) {
10703
10722
  if (changes['bookletJSON'] && changes['bookletJSON'].currentValue) {
@@ -10706,40 +10725,48 @@ class ElementComponent {
10706
10725
  }
10707
10726
  }
10708
10727
  initializeForm() {
10728
+ if (!this.bookletJSON || !this.bookletJSON.bookQuestionsMap) {
10729
+ console.warn("Invalid bookletJSON structure");
10730
+ return;
10731
+ }
10709
10732
  localStorage.setItem('status', "edit");
10710
10733
  localStorage.setItem('unique_id', this.bookletId);
10711
10734
  this.formElements = [];
10712
10735
  this.formBuilderService.clearElements();
10713
- const bookQuestionsMapKeys = Object.keys(this.bookletJSON.bookQuestionsMap || {});
10714
- // Assign the first key from bookQuestionsMap to bookletId
10736
+ const bookQuestionsMapKeys = Object.keys(this.bookletJSON.bookQuestionsMap);
10737
+ if (bookQuestionsMapKeys.length === 0)
10738
+ return;
10715
10739
  this.bookId = bookQuestionsMapKeys[0];
10716
- this.bookletJSON.bookQuestionsMap[this.bookId].subQuestions.forEach(newElement => {
10717
- if (this.bookletJSON.sqOptions && this.bookletJSON.sqOptions[newElement.id]) {
10740
+ this.bookletJSON.bookQuestionsMap[this.bookId]?.subQuestions?.forEach(newElement => {
10741
+ if (this.bookletJSON.sqOptions?.[newElement.id]) {
10718
10742
  newElement.options = this.bookletJSON.sqOptions[newElement.id].options;
10719
10743
  }
10720
10744
  this.formBuilderService.addElement(newElement);
10721
10745
  });
10722
10746
  this.formElements = this.formBuilderService.getElements();
10723
10747
  }
10748
+ // ngOnDestroy() {
10749
+ // this.subscription.unsubscribe();
10750
+ // }
10724
10751
  drop(event) {
10725
10752
  moveItemInArray(this.formElements, event.previousIndex, event.currentIndex);
10726
10753
  }
10727
10754
  // Add this method to handle element selection
10728
10755
  selectElement(index) {
10729
- this.selectedFieldIndex = index;
10756
+ this.selectedFieldIndex = index; // element is selected
10730
10757
  this.formBuilderService.setSelectedElement(index);
10731
- const element = this.formElements[index];
10732
- this.elementButtonClicked.emit(element.type);
10758
+ //const element = this.formElements[index];
10759
+ // this.elementButtonClicked.emit(element.type);
10733
10760
  }
10734
- selectedIndex = null;
10735
- selectedFieldIndex = null;
10761
+ //selectedIndex: number | null = null;
10762
+ selectedFieldIndex = null; // element is cleared
10736
10763
  addElement(type) {
10737
10764
  const unique_id = v4();
10738
10765
  const newElement = {
10739
10766
  id: unique_id,
10740
10767
  uid: unique_id,
10741
- name: '',
10742
10768
  type,
10769
+ name: '',
10743
10770
  questionText: '',
10744
10771
  question: '',
10745
10772
  helpText: '',
@@ -10787,44 +10814,28 @@ class ElementComponent {
10787
10814
  const styles = {
10788
10815
  'font-family': field.font || 'Helvetica Neue',
10789
10816
  'font-weight': field.fontWeight || '400',
10790
- 'width': `${(field.size || 12) / 12 * 100}%`,
10817
+ 'width': field.size ? `${(field.size / 12) * 100}%` : '100%',
10791
10818
  'min-height': field.height ? `${field.height}px` : 'auto',
10792
10819
  'text-align': field.textAlign || 'left',
10793
10820
  'border-radius': '5px',
10794
10821
  'margin-bottom': '10px'
10795
10822
  };
10796
- // Handle array of style classes
10797
- if (field.styles && Array.isArray(field.styles)) {
10798
- if (field.styles.includes('bold')) {
10799
- styles['font-weight'] = '700';
10800
- }
10801
- if (field.styles.includes('italic')) {
10802
- styles['font-style'] = 'italic';
10803
- }
10804
- if (field.styles.includes('underline')) {
10805
- styles['text-decoration'] = 'underline';
10806
- }
10807
- if (field.styles.includes('capitalize')) {
10808
- styles['text-transform'] = 'capitalize';
10809
- }
10810
- if (field.styles.includes('lowercase')) {
10811
- styles['text-transform'] = 'lowercase';
10812
- }
10813
- }
10823
+ // if (Array.isArray(field.styles)) {
10824
+ // styles['font-weight'] = field.styles.includes('bold') ? '700' : styles['font-weight'];
10825
+ // styles['font-style'] = field.styles.includes('italic') ? 'italic' : undefined;
10826
+ // styles['text-decoration'] = field.styles.includes('underline') ? 'underline' : undefined;
10827
+ // styles['text-transform'] = field.styles.includes('capitalize') ? 'capitalize' :
10828
+ // field.styles.includes('lowercase') ? 'lowercase' : undefined;
10829
+ // }
10814
10830
  return styles;
10815
10831
  }
10816
10832
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
10817
- 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 }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <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=\"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=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" 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'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" 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 : '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)\" class=\"delete-icon\" />\n </div> \n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" 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 <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" 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<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</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 type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</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 type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\" [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\" class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</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\"> {{ option.label }} </option>\n </select>\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<!-- 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<!-- 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</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.form-builder{width:25%;height:100vh;overflow-y:auto;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}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width: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{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.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 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}.highlight{border:2px solid blue;background-color:#0000ff1a}\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"] }] });
10833
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <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=\"form-builder\">\n <!-- Basic Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n <h3>Basic Elements</h3>\n <span class=\"toggle-icon\">{{ sections.basic ? '\u25BC' : '\u25B6' }}</span>\n </div>\n\n <div *ngIf=\"sections.basic\">\n <ng-container *ngFor=\"let element of basicElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\" cdkDrag>\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n </div>\n\n <!-- Advanced Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n <h3>Advanced Elements</h3>\n <span>{{ sections.advanced ? '\u25BC' : '\u25B6' }}</span>\n </div>\n <div *ngIf=\"sections.advanced\">\n <ng-container *ngFor=\"let element of advancedElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n </div>\n</div>\n \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\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : '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\"/>\n </div>\n </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\"/>\n </div>\n </div>\n</div>\n \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : '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)\" class=\"delete-icon\" />\n </div> \n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n </div>\n </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : '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\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n </div>\n </div>\n</div>\n \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</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 type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</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 type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\" [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\" class=\"radio-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\"[disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" >\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n </select>\n </div>\n </div>\n</div>\n \n<!-- Table -->\n <!-- AP-06MAR25 -->\n<div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n</div>\n\n<!-- List -->\n <!-- AP-06MAR25 - List data show-->\n<div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n </div>\n </div>\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<!-- 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</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.form-builder{width:25%;height:100vh;overflow-y:auto;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:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;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:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;justify-content:space-between}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width: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{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.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 label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}\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.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"] }] });
10818
10834
  }
10819
10835
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
10820
10836
  type: Component,
10821
- args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\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=\"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=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" 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'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" 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 : '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)\" class=\"delete-icon\" />\n </div> \n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" 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 <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" 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<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</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 type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</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 type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\" [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\" class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" 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 : 'Label' }}</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\"> {{ option.label }} </option>\n </select>\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<!-- 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<!-- 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</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.form-builder{width:25%;height:100vh;overflow-y:auto;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}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width: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{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.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 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}.highlight{border:2px solid blue;background-color:#0000ff1a}\n"] }]
10822
- }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
10823
- type: Output
10824
- }], formContainer: [{
10825
- type: ViewChild,
10826
- args: ['formContainer']
10827
- }], bookletJSON: [{
10837
+ args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\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=\"form-builder\">\n <!-- Basic Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('basic')\">\n <h3>Basic Elements</h3>\n <span class=\"toggle-icon\">{{ sections.basic ? '\u25BC' : '\u25B6' }}</span>\n </div>\n\n <div *ngIf=\"sections.basic\">\n <ng-container *ngFor=\"let element of basicElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\" cdkDrag>\n <img src=\"../assets/icons/{{ element.img }}.svg\" class=\"element-icon\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n </div>\n\n <!-- Advanced Elements Toggle -->\n <div class=\"toggle-header\" (click)=\"toggleSection('advanced')\">\n <h3>Advanced Elements</h3>\n <span>{{ sections.advanced ? '\u25BC' : '\u25B6' }}</span>\n </div>\n <div *ngIf=\"sections.advanced\">\n <ng-container *ngFor=\"let element of advancedElements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n </div>\n</div>\n \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\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : '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\"/>\n </div>\n </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" />\n </div>\n </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\"/>\n </div>\n </div>\n</div>\n \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : '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)\" class=\"delete-icon\" />\n </div> \n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n </div>\n </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : '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\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n </div>\n </div>\n</div>\n \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</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 type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\"\n [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</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 type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\" [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\" class=\"radio-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.value }}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\"[disabled]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" >\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.value }} </option>\n </select>\n </div>\n </div>\n</div>\n \n<!-- Table -->\n <!-- AP-06MAR25 -->\n<div *ngIf=\"field.type === 'Table'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n </div>\n </div>\n</div>\n\n<!-- List -->\n <!-- AP-06MAR25 - List data show-->\n<div *ngIf=\"field.type === 'List'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.isRequired\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"text\" class=\"custom-input\" placeholder=\"Search...\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\"/>\n </div>\n </div>\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<!-- 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</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.form-builder{width:25%;height:100vh;overflow-y:auto;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:#f8fafc;cursor:pointer;border-left:10px solid #E2F1FF;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:15px;font-weight:400;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.toggle-header{display:flex;justify-content:space-between}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width: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{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.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 label{font-size:15px;font-weight:400}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}.table-container label{font-size:14px;font-weight:700;margin-bottom:5px;display:block}\n"] }]
10838
+ }], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { bookletJSON: [{
10828
10839
  type: Input
10829
10840
  }], bookletId: [{
10830
10841
  type: Input
@@ -10841,14 +10852,9 @@ class PropertiesComponent {
10841
10852
  selectedStyles = []; // Using array since multiple styles can be selected
10842
10853
  errorMessage = '';
10843
10854
  selectedElement = null; // Receive the selected element
10844
- onToggleChange(property, event) {
10845
- const value = event.target.checked;
10846
- if (this.selectedElement) {
10847
- const update = { [property]: value };
10848
- this.formBuilderService.updateElement(this.selectedElementIndex, update);
10849
- // Update the selected element directly for immediate UI feedback
10850
- this.selectedElement[property] = value;
10851
- }
10855
+ onToggleChange(key, event) {
10856
+ const checked = event.target.checked;
10857
+ this.selectedElement = { ...this.selectedElement, [key]: checked };
10852
10858
  }
10853
10859
  updateProperties(elementType) {
10854
10860
  // Reset alignment and styles if switching elements
@@ -10882,11 +10888,11 @@ class PropertiesComponent {
10882
10888
  // questionText - Label-follow all element properties
10883
10889
  { label: 'Label', placeholder: 'Enter Text ', type: 'text', key: 'questionText' },
10884
10890
  // question - Placeholder-follow all element properties
10885
- { label: 'placeholder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10891
+ { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10886
10892
  { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
10887
- { label: '', type: 'toggleGroup' },
10893
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
10888
10894
  // errorMessage - Error Msg-follow all element properties
10889
- { label: 'Error Msg', placeholder: 'Enter Text ', type: 'text', key: 'errorMsg' },
10895
+ { label: 'Error Msg', placeholder: 'Enter Text ', type: 'text', key: 'errorMessage' },
10890
10896
  { label: 'Font', type: 'select', key: 'font',
10891
10897
  options: ['Helvetica Neue', 'Arial', 'Times New Roman', 'Roboto'] },
10892
10898
  { label: 'Weight', type: 'select', key: 'fontWeight',
@@ -10917,11 +10923,11 @@ class PropertiesComponent {
10917
10923
  { label: 'Field Size', type: 'fieldSize', key: 'size' }
10918
10924
  ],
10919
10925
  fieldProps: [
10920
- { label: 'Field Required', type: 'radio' },
10926
+ { label: 'Field Required', type: 'radio', key: 'isRequired' },
10921
10927
  { label: 'Default Value', placeholder: 'Enter Text ', type: 'text', key: 'defaultValue' },
10922
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
10923
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
10924
- { label: 'Sub Text', placeholder: 'Enter Text ', type: 'text' }
10928
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
10929
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
10930
+ { label: 'SubText', placeholder: 'Enter Text', type: 'text', key: 'subText' }
10925
10931
  ]
10926
10932
  },
10927
10933
  'CheckBox': {
@@ -10929,9 +10935,9 @@ class PropertiesComponent {
10929
10935
  { label: 'Label', placeholder: 'Enter Text ', type: 'text', key: 'questionText' },
10930
10936
  { label: 'Place Holder', placeholder: 'Enter Text ', type: 'text', key: 'question' },
10931
10937
  { label: 'Help Text', placeholder: 'Enter Text ', type: 'text', key: 'helpText' },
10932
- { label: '', type: 'toggleGroup' },
10938
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
10933
10939
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
10934
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10940
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
10935
10941
  ],
10936
10942
  fieldProps: [
10937
10943
  { label: 'Field Required', type: 'radio' },
@@ -10943,9 +10949,9 @@ class PropertiesComponent {
10943
10949
  addOptionLabel: 'Add Option',
10944
10950
  icon: 'plus'
10945
10951
  },
10946
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
10947
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
10948
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
10952
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
10953
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
10954
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
10949
10955
  ]
10950
10956
  },
10951
10957
  'Calendar': {
@@ -10953,16 +10959,16 @@ class PropertiesComponent {
10953
10959
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
10954
10960
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10955
10961
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10956
- { label: '', type: 'toggleGroup' },
10962
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
10957
10963
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
10958
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10964
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
10959
10965
  ],
10960
10966
  fieldProps: [
10961
10967
  { label: 'Field Required', type: 'radio' },
10962
10968
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
10963
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
10964
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
10965
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
10969
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
10970
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
10971
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
10966
10972
  ]
10967
10973
  },
10968
10974
  'Time': {
@@ -10970,16 +10976,16 @@ class PropertiesComponent {
10970
10976
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'label' },
10971
10977
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'placeholder' },
10972
10978
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10973
- { label: '', type: 'toggleGroup' },
10979
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
10974
10980
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
10975
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10981
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
10976
10982
  ],
10977
10983
  fieldProps: [
10978
10984
  { label: 'Field Required', type: 'radio' },
10979
10985
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
10980
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
10981
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
10982
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
10986
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
10987
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
10988
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
10983
10989
  ]
10984
10990
  },
10985
10991
  'Email': {
@@ -10987,16 +10993,16 @@ class PropertiesComponent {
10987
10993
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
10988
10994
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
10989
10995
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
10990
- { label: '', type: 'toggleGroup' },
10996
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
10991
10997
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
10992
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
10998
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
10993
10999
  ],
10994
11000
  fieldProps: [
10995
11001
  { label: 'Field Required', type: 'radio' },
10996
11002
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
10997
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
10998
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
10999
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11003
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11004
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11005
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
11000
11006
  ]
11001
11007
  },
11002
11008
  'File': {
@@ -11012,16 +11018,16 @@ class PropertiesComponent {
11012
11018
  { label: 'Executables (EXE, BAD, SH)', value: 'application/x-msdownload,application/x-sh', extensions: ['.exe', '.bad', '.sh'] },
11013
11019
  { label: 'Archives (ZIP, RAR, Git-hub)', value: 'application/zip,application/x-rar-compressed,application/x-git', extensions: ['.zip', '.rar', '.git'] }
11014
11020
  ] },
11015
- { label: '', type: 'toggleGroup' },
11021
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
11016
11022
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
11017
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11023
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
11018
11024
  ],
11019
11025
  fieldProps: [
11020
11026
  { label: 'Field Required', type: 'radio' },
11021
11027
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
11022
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11023
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11024
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11028
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11029
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11030
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
11025
11031
  ]
11026
11032
  },
11027
11033
  'List': {
@@ -11029,16 +11035,16 @@ class PropertiesComponent {
11029
11035
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11030
11036
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11031
11037
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11032
- { label: '', type: 'toggleGroup' },
11038
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
11033
11039
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
11034
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11040
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
11035
11041
  ],
11036
11042
  fieldProps: [
11037
11043
  { label: 'Field Required', type: 'radio' },
11038
11044
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
11039
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11040
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11041
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11045
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11046
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11047
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
11042
11048
  ]
11043
11049
  },
11044
11050
  'TextArea': {
@@ -11046,16 +11052,16 @@ class PropertiesComponent {
11046
11052
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11047
11053
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11048
11054
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11049
- { label: '', type: 'toggleGroup' },
11055
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
11050
11056
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
11051
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11057
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
11052
11058
  ],
11053
11059
  fieldProps: [
11054
11060
  { label: 'Field Required', type: 'radio', key: 'required' },
11055
11061
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text', key: 'defaultValue' },
11056
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11057
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11058
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11062
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11063
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11064
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
11059
11065
  ]
11060
11066
  },
11061
11067
  'Number': {
@@ -11063,16 +11069,16 @@ class PropertiesComponent {
11063
11069
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11064
11070
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11065
11071
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11066
- { label: '', type: 'toggleGroup' },
11072
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
11067
11073
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
11068
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11074
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
11069
11075
  ],
11070
11076
  fieldProps: [
11071
11077
  { label: 'Field Required', type: 'radio' },
11072
11078
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
11073
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11074
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11075
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11079
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11080
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11081
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
11076
11082
  ]
11077
11083
  },
11078
11084
  'Dropdown': {
@@ -11080,9 +11086,9 @@ class PropertiesComponent {
11080
11086
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11081
11087
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11082
11088
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11083
- { label: '', type: 'toggleGroup' },
11089
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
11084
11090
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
11085
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11091
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
11086
11092
  ],
11087
11093
  fieldProps: [
11088
11094
  { label: 'Field Required', type: 'radio' },
@@ -11094,9 +11100,9 @@ class PropertiesComponent {
11094
11100
  addOptionLabel: 'Add Variant',
11095
11101
  icon: 'plus'
11096
11102
  },
11097
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11098
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11099
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' },
11103
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11104
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11105
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
11100
11106
  ]
11101
11107
  },
11102
11108
  'Image': {
@@ -11104,16 +11110,16 @@ class PropertiesComponent {
11104
11110
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11105
11111
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11106
11112
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11107
- { label: '', type: 'toggleGroup' },
11113
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
11108
11114
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
11109
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11115
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
11110
11116
  ],
11111
11117
  fieldProps: [
11112
11118
  { label: 'Field Required', type: 'radio' },
11113
11119
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
11114
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11115
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11116
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11120
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11121
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11122
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
11117
11123
  ]
11118
11124
  },
11119
11125
  'Radio': {
@@ -11121,9 +11127,9 @@ class PropertiesComponent {
11121
11127
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11122
11128
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11123
11129
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11124
- { label: '', type: 'toggleGroup' },
11130
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
11125
11131
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
11126
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11132
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
11127
11133
  ],
11128
11134
  fieldProps: [
11129
11135
  { label: 'Field Required', type: 'radio' },
@@ -11135,9 +11141,9 @@ class PropertiesComponent {
11135
11141
  addOptionLabel: 'Add Option',
11136
11142
  icon: 'plus'
11137
11143
  },
11138
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11139
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11140
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' },
11144
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11145
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11146
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
11141
11147
  ]
11142
11148
  },
11143
11149
  'Label': {
@@ -11145,16 +11151,30 @@ class PropertiesComponent {
11145
11151
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11146
11152
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11147
11153
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11148
- { label: '', type: 'toggleGroup' },
11154
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
11149
11155
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
11150
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11156
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
11151
11157
  ],
11152
11158
  fieldProps: [
11153
11159
  { label: 'Field Required', type: 'radio' },
11154
11160
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
11155
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11156
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11157
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11161
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11162
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11163
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
11164
+ ]
11165
+ },
11166
+ 'Table': {
11167
+ elementProps: [
11168
+ { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11169
+ { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11170
+ { label: 'Field Size', type: 'fieldSize', key: 'size' },
11171
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' }
11172
+ ],
11173
+ fieldProps: [
11174
+ { label: 'Field Required', type: 'radio' },
11175
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11176
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11177
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' },
11158
11178
  ]
11159
11179
  },
11160
11180
  'Book': {
@@ -11162,16 +11182,16 @@ class PropertiesComponent {
11162
11182
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11163
11183
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11164
11184
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11165
- { label: '', type: 'toggleGroup' },
11185
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
11166
11186
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
11167
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11187
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
11168
11188
  ],
11169
11189
  fieldProps: [
11170
11190
  { label: 'Field Required', type: 'radio' },
11171
11191
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
11172
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11173
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11174
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11192
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11193
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11194
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
11175
11195
  ]
11176
11196
  },
11177
11197
  'Button': {
@@ -11179,16 +11199,16 @@ class PropertiesComponent {
11179
11199
  { label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
11180
11200
  { label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
11181
11201
  { label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
11182
- { label: '', type: 'toggleGroup' },
11202
+ { label: '', type: 'toggleGroup', key: 'toggleOptions' },
11183
11203
  { label: 'Field Size', type: 'fieldSize', key: 'size' },
11184
- { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
11204
+ { label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMessage' },
11185
11205
  ],
11186
11206
  fieldProps: [
11187
11207
  { label: 'Field Required', type: 'radio' },
11188
11208
  { label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
11189
- { label: 'Reference', placeholder: 'Reference Field', type: 'text' },
11190
- { label: 'Style', placeholder: 'Style JSON', type: 'text' },
11191
- { label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
11209
+ { label: 'Reference', placeholder: 'Reference Field', type: 'text', key: 'referenceField' },
11210
+ { label: 'Style', placeholder: 'Style JSON', type: 'text', key: 'style' },
11211
+ { label: 'Sub Text', placeholder: 'Enter Text', type: 'text', key: 'subText' }
11192
11212
  ]
11193
11213
  },
11194
11214
  };
@@ -11254,13 +11274,12 @@ class PropertiesComponent {
11254
11274
  }
11255
11275
  onRequiredChange(value) {
11256
11276
  if (this.selectedElement) {
11257
- // Remove any existing asterisks first
11258
- let label = this.selectedElement.label.replace(/\s*\*+$/, '');
11277
+ let label = this.selectedElement.label ? this.selectedElement.label.replace(/\s*\*+$/, '') : 'Label';
11259
11278
  if (value) {
11260
- label = `${label} *`; // Add single asterisk
11279
+ label = `${label} *`;
11261
11280
  }
11262
11281
  this.updateProperty('label', label);
11263
- this.updateProperty('required', value);
11282
+ this.updateProperty('isRequired', value);
11264
11283
  }
11265
11284
  }
11266
11285
  getProperties() {
@@ -11274,18 +11293,18 @@ class PropertiesComponent {
11274
11293
  removeOption(options, index) {
11275
11294
  options.splice(index, 1);
11276
11295
  }
11277
- download() {
11278
- console.log('Question Book:', this.formBuilderService.downloadElement());
11279
- }
11296
+ // download() {
11297
+ // console.log('Question Book:', this.formBuilderService.downloadElement());
11298
+ // }
11280
11299
  handleButtonClick() {
11281
11300
  this.formButtonHandler.emit(this.formBuilderService.downloadElement());
11282
11301
  }
11283
11302
  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 });
11284
- 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<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\">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<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{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:500;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\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"] }] });
11303
+ 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<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\">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<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-item\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\" \n (change)=\"onToggleChange('isReadOnly', $event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n\n <div class=\"toggle-item\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\" \n (change)=\"onToggleChange('isHidden', $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 <div class=\"input-box-field\">\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"/> </div>\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?.isRequired\" (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?.isRequired\" (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\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].value\" 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</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\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"] }] });
11285
11304
  }
11286
11305
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
11287
11306
  type: Component,
11288
- args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\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\">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<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{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:500;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\n"] }]
11307
+ args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\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\">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<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-item\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isReadOnly\" \n (change)=\"onToggleChange('isReadOnly', $event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n\n <div class=\"toggle-item\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHidden\" \n (change)=\"onToggleChange('isHidden', $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 <div class=\"input-box-field\">\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"/> </div>\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?.isRequired\" (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?.isRequired\" (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\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].value\" 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</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:center;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:400;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:15px;font-weight:400;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\n"] }]
11289
11308
  }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { formButtonHandler: [{
11290
11309
  type: Output
11291
11310
  }], selectedElementType: [{
@@ -11334,7 +11353,7 @@ class FormComponent {
11334
11353
  this.formButtonHandler.emit(event);
11335
11354
  }
11336
11355
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11337
- 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 \">\n <!-- app-element Component -->\n <app-element [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n ", styles: [".form-container{display:flex;flex-wrap:wrap;width:100%;height:100vh}app-element{width:75%}app-properties{width:25%;overflow-y:auto;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"] }] });
11356
+ 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 \">\n <!-- app-element Component -->\n <app-element [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n ", styles: [".form-container{display:flex;flex-wrap:wrap;width:100%;height:100vh}app-element{width:75%}app-properties{width:25%;overflow-y:auto;border:10px solid #86A8CD}\n"], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
11338
11357
  }
11339
11358
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
11340
11359
  type: Component,