@rangertechnologies/ngnxt 2.1.99 → 2.1.101
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.
- package/esm2022/lib/pages/builder/element/element.component.mjs +35 -22
- package/esm2022/lib/pages/builder/form/form.component.mjs +3 -3
- package/esm2022/lib/pages/builder/properties/properties.component.mjs +20 -3
- package/esm2022/lib/services/form-builder.service.mjs +6 -1
- package/fesm2022/rangertechnologies-ngnxt.mjs +60 -25
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/lib/pages/builder/element/element.component.d.ts +5 -1
- package/lib/pages/builder/properties/properties.component.d.ts +27 -0
- package/lib/services/form-builder.service.d.ts +1 -0
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.101.tgz +0 -0
- package/rangertechnologies-ngnxt-2.1.99.tgz +0 -0
|
@@ -10494,6 +10494,11 @@ class FormBuilderService {
|
|
|
10494
10494
|
this.unique_id = localStorage.getItem('unique_id');
|
|
10495
10495
|
}
|
|
10496
10496
|
}
|
|
10497
|
+
// AP 26FEB25 - clear the form elements
|
|
10498
|
+
clearElements() {
|
|
10499
|
+
this.formElements = [];
|
|
10500
|
+
this.formElementsSubject.next([...this.formElements]);
|
|
10501
|
+
}
|
|
10497
10502
|
// Get the element component reference
|
|
10498
10503
|
getElementComponent() {
|
|
10499
10504
|
return this.elementComponent;
|
|
@@ -10643,7 +10648,7 @@ class ElementComponent {
|
|
|
10643
10648
|
{ "type": "Email", "img": "Email", "label": "Email" },
|
|
10644
10649
|
{ "type": "File", "img": "File", "label": "File" },
|
|
10645
10650
|
{ "type": "Image", "img": "Image", "label": "Image" },
|
|
10646
|
-
{ "type": "
|
|
10651
|
+
{ "type": "Number", "img": "Number", "label": "Number" },
|
|
10647
10652
|
{ "type": "List", "img": "List", "label": "List" },
|
|
10648
10653
|
{ "type": "Radio", "img": "Radio", "label": "Radio" },
|
|
10649
10654
|
{ "type": "Text", "img": "Text", "label": "Text" },
|
|
@@ -10658,35 +10663,47 @@ class ElementComponent {
|
|
|
10658
10663
|
this.formElements = elements;
|
|
10659
10664
|
});
|
|
10660
10665
|
if (this.bookletJSON) {
|
|
10661
|
-
|
|
10662
|
-
localStorage.setItem('status', ("edit"));
|
|
10663
|
-
localStorage.setItem('unique_id', this.bookletId);
|
|
10664
|
-
this.formElements = [];
|
|
10665
|
-
const bookQuestionsMapKeys = Object.keys(this.bookletJSON.bookQuestionsMap || {});
|
|
10666
|
-
console.log("Keys in bookQuestionsMap:", bookQuestionsMapKeys);
|
|
10667
|
-
//AP 25FEB25 - Assign the first key from bookQuestionsMap to bookletId
|
|
10668
|
-
this.bookletId = bookQuestionsMapKeys[0];
|
|
10669
|
-
this.bookletJSON.bookQuestionsMap[this.bookletId].subQuestions.forEach(newElement => {
|
|
10670
|
-
if (this.bookletJSON.sqOptions && this.bookletJSON.sqOptions[newElement.id]) {
|
|
10671
|
-
newElement.options = this.bookletJSON.sqOptions[newElement.id].options;
|
|
10672
|
-
}
|
|
10673
|
-
this.formBuilderService.addElement(newElement);
|
|
10674
|
-
});
|
|
10675
|
-
this.formElements = this.formBuilderService.getElements();
|
|
10666
|
+
this.initializeForm();
|
|
10676
10667
|
}
|
|
10677
10668
|
else {
|
|
10678
10669
|
localStorage.setItem('status', "new");
|
|
10679
10670
|
}
|
|
10680
10671
|
}
|
|
10672
|
+
// AP - 26FEB25 - Added ngOnChanges to handle changes in bookletJSON
|
|
10673
|
+
ngOnChanges(changes) {
|
|
10674
|
+
if (changes['bookletJSON'] && changes['bookletJSON'].currentValue) {
|
|
10675
|
+
this.initializeForm();
|
|
10676
|
+
console.log('changes', changes);
|
|
10677
|
+
}
|
|
10678
|
+
}
|
|
10679
|
+
initializeForm() {
|
|
10680
|
+
localStorage.setItem('status', "edit");
|
|
10681
|
+
localStorage.setItem('unique_id', this.bookletId);
|
|
10682
|
+
this.formElements = [];
|
|
10683
|
+
this.formBuilderService.clearElements();
|
|
10684
|
+
const bookQuestionsMapKeys = Object.keys(this.bookletJSON.bookQuestionsMap || {});
|
|
10685
|
+
// Assign the first key from bookQuestionsMap to bookletId
|
|
10686
|
+
this.bookletId = bookQuestionsMapKeys[0];
|
|
10687
|
+
this.bookletJSON.bookQuestionsMap[this.bookletId].subQuestions.forEach(newElement => {
|
|
10688
|
+
if (this.bookletJSON.sqOptions && this.bookletJSON.sqOptions[newElement.id]) {
|
|
10689
|
+
newElement.options = this.bookletJSON.sqOptions[newElement.id].options;
|
|
10690
|
+
}
|
|
10691
|
+
this.formBuilderService.addElement(newElement);
|
|
10692
|
+
});
|
|
10693
|
+
this.formElements = this.formBuilderService.getElements();
|
|
10694
|
+
}
|
|
10681
10695
|
drop(event) {
|
|
10682
10696
|
moveItemInArray(this.formElements, event.previousIndex, event.currentIndex);
|
|
10683
10697
|
}
|
|
10684
10698
|
// Add this method to handle element selection
|
|
10685
10699
|
selectElement(index) {
|
|
10700
|
+
this.selectedFieldIndex = index;
|
|
10686
10701
|
this.formBuilderService.setSelectedElement(index);
|
|
10687
10702
|
const element = this.formElements[index];
|
|
10688
|
-
this.elementButtonClicked.emit(element.type);
|
|
10703
|
+
this.elementButtonClicked.emit(element.type);
|
|
10689
10704
|
}
|
|
10705
|
+
selectedIndex = null;
|
|
10706
|
+
selectedFieldIndex = null;
|
|
10690
10707
|
addElement(type) {
|
|
10691
10708
|
const unique_id = v4();
|
|
10692
10709
|
const newElement = {
|
|
@@ -10742,9 +10759,10 @@ class ElementComponent {
|
|
|
10742
10759
|
'font-family': field.font || 'Helvetica Neue',
|
|
10743
10760
|
'font-weight': field.fontWeight || '400',
|
|
10744
10761
|
'width': `${(field.size || 12) / 12 * 100}%`,
|
|
10745
|
-
'height': `${field.height
|
|
10762
|
+
'min-height': field.height ? `${field.height}px` : 'auto',
|
|
10746
10763
|
'text-align': field.textAlign || 'left',
|
|
10747
|
-
'border-radius': '5px'
|
|
10764
|
+
'border-radius': '5px',
|
|
10765
|
+
'margin-bottom': '10px'
|
|
10748
10766
|
};
|
|
10749
10767
|
// Handle array of style classes
|
|
10750
10768
|
if (field.styles && Array.isArray(field.styles)) {
|
|
@@ -10767,11 +10785,11 @@ class ElementComponent {
|
|
|
10767
10785
|
return styles;
|
|
10768
10786
|
}
|
|
10769
10787
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10770
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame row\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n <!-- Form Builder Section All Elements -->\n <div class=\"col-md-3 form-builder\">\n <ng-container *ngFor=\"let element of elements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n </div>\n \n<div class=\"col-md-9 form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"text\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter text'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input \n type=\"checkbox\" \n [id]=\"option.value + i\"\n [name]=\"field.id\"\n [value]=\"option.value\"\n class=\"checkbox-input\"\n >\n <label [for]=\"option.value + i\" class=\"checkbox-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n <!-- AP-29JAN25 radio-button design check -->\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"radio-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input \n type=\"radio\" \n [id]=\"'radio-' + field.id + '-' + j\"\n [name]=\"'radio-group-' + field.id\" \n [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\"\n class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"text-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\">\n {{ option.value }}\n </option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" \n class=\"calendar-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" \n class=\"email-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"email\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter email'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n \n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" \n class=\"number-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"number\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter number'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" \n class=\"text-area-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" \n (click)=\"removeElement(field, i)\" \n class=\"delete-icon\" />\n </div>\n \n <textarea class=\"custom-textarea\"\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n <!-- AP-29JAN25 Image design change -->\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n\n <!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n</div>\n</div>\n</div>\n\n <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".form-builder{width:250px;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.text-field-container,.number-field-container,.email-field-container,.calendar-field-container,.checkbox-field-container,.radio-field-container,.text-area-container{padding:10px;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px}.field-wrapper{display:flex;align-items:center}.field-content{width:97%}.label-container{display:flex;justify-content:space-between;align-items:center;font-weight:700}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{overflow-y:auto;display:flex;flex-wrap:wrap;gap:10px}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
|
|
10788
|
+
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 <!-- AP-29JAN25 remove empty classes -->\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 <!-- 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 <!-- AP-29JAN25 radio-button design check -->\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.value }}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\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.value }} </option>\n </select>\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 <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" 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<!-- AP-29JAN25 Image design change -->\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 <!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" class=\"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 <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" 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</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex}.form-builder{width:25%;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}.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"] }] });
|
|
10771
10789
|
}
|
|
10772
10790
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
|
|
10773
10791
|
type: Component,
|
|
10774
|
-
args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame row\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n <!-- Form Builder Section All Elements -->\n <div class=\"col-md-3 form-builder\">\n <ng-container *ngFor=\"let element of elements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n </div>\n \n<div class=\"col-md-9 form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n <!-- AP-29JAN25 remove empty classes -->\n <!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"text\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter text'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n <!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input \n type=\"checkbox\" \n [id]=\"option.value + i\"\n [name]=\"field.id\"\n [value]=\"option.value\"\n class=\"checkbox-input\"\n >\n <label [for]=\"option.value + i\" class=\"checkbox-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n <!-- AP-29JAN25 radio-button design check -->\n <!-- Radio -->\n <div *ngIf=\"field.type === 'Radio'\" class=\"radio-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input \n type=\"radio\" \n [id]=\"'radio-' + field.id + '-' + j\"\n [name]=\"'radio-group-' + field.id\" \n [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\"\n class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\">\n {{ option.value }}\n </label>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n \n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"text-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\">\n {{ option.value }}\n </option>\n </select>\n </div>\n </div>\n</div>\n\n <!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" \n class=\"calendar-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n <!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" \n class=\"email-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"email\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter email'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n \n <!-- Numbers -->\n<div *ngIf=\"field.type === 'Numbers'\" \n class=\"number-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Label' }}\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n \n <input type=\"number\" \n class=\"custom-input\" \n [placeholder]=\"field.question || 'Enter number'\" \n [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" \n [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" \n class=\"text-area-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">\n {{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" \n (click)=\"removeElement(field, i)\" \n class=\"delete-icon\" />\n </div>\n \n <textarea class=\"custom-textarea\"\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\n [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\"\n [class.hidden]=\"field.isHide\"\n [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n <!-- AP-29JAN25 Image design change -->\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n\n <!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" class=\"calendar-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n</div>\n</div>\n</div>\n\n <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" \n class=\"text-field-container\" \n (click)=\"selectElement(i)\" \n [ngStyle]=\"getFontStyles(field)\" \n cdkDrag>\n\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <!-- No input box here -->\n </div>\n </div>\n</div>\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".form-builder{width:250px;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.text-field-container,.number-field-container,.email-field-container,.calendar-field-container,.checkbox-field-container,.radio-field-container,.text-area-container{padding:10px;background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px}.field-wrapper{display:flex;align-items:center}.field-content{width:97%}.label-container{display:flex;justify-content:space-between;align-items:center;font-weight:700}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{overflow-y:auto;display:flex;flex-wrap:wrap;gap:10px}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}\n"] }]
|
|
10792
|
+
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 <!-- AP-29JAN25 remove empty classes -->\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 <!-- 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 <!-- AP-29JAN25 radio-button design check -->\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.value }}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n <!-- AP-29JAN25 drop-down design check -->\n <!-- Dropdown Field -->\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.value }} </option>\n </select>\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 <!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- TextArea -->\n <!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" 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<!-- AP-29JAN25 Image design change -->\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 <!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n <!-- File -->\n <!-- AP-29JAN25 file design change -->\n<div *ngIf=\"field.type === 'File'\" class=\"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 <!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n <!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" 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</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex}.form-builder{width:25%;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}.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"] }]
|
|
10775
10793
|
}], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
|
|
10776
10794
|
type: Output
|
|
10777
10795
|
}], formContainer: [{
|
|
@@ -11093,6 +11111,23 @@ class PropertiesComponent {
|
|
|
11093
11111
|
{ label: 'Sub Text', placeholder: 'Enter Text', type: 'text' },
|
|
11094
11112
|
]
|
|
11095
11113
|
},
|
|
11114
|
+
'Label': {
|
|
11115
|
+
elementProps: [
|
|
11116
|
+
{ label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
|
|
11117
|
+
{ label: 'Place Holder', placeholder: 'Enter Text', type: 'text', key: 'question' },
|
|
11118
|
+
{ label: 'Help Text', placeholder: 'Enter Text', type: 'text', key: 'helpText' },
|
|
11119
|
+
{ label: '', type: 'toggleGroup' },
|
|
11120
|
+
{ label: 'Field Size', type: 'fieldSize', key: 'size' },
|
|
11121
|
+
{ label: 'Error Msg', placeholder: 'Enter Text', type: 'text', key: 'errorMsg' },
|
|
11122
|
+
],
|
|
11123
|
+
fieldProps: [
|
|
11124
|
+
{ label: 'Field Required', type: 'radio' },
|
|
11125
|
+
{ label: 'Default Value', placeholder: 'Enter Text', type: 'text' },
|
|
11126
|
+
{ label: 'Reference', placeholder: 'Reference Field', type: 'text' },
|
|
11127
|
+
{ label: 'Style', placeholder: 'Style JSON', type: 'text' },
|
|
11128
|
+
{ label: 'Sub Text', placeholder: 'Enter Text', type: 'text' }
|
|
11129
|
+
]
|
|
11130
|
+
},
|
|
11096
11131
|
'Book': {
|
|
11097
11132
|
elementProps: [
|
|
11098
11133
|
{ label: 'Label', placeholder: 'Enter Text', type: 'text', key: 'questionText' },
|
|
@@ -11217,11 +11252,11 @@ class PropertiesComponent {
|
|
|
11217
11252
|
this.formButtonHandler.emit(this.formBuilderService.downloadElement());
|
|
11218
11253
|
}
|
|
11219
11254
|
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 });
|
|
11220
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Element Properties</h1>\n <!-- AP 25FEB25 - not used -->\n <!-- <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div> -->\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n</div>\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n </div>\n </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{width:100%;max-width:600px;margin:0 auto;padding:15px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f4f4f4;border-radius:6px;margin-bottom:15px}.header-title{font-size:18px;font-weight:500;color:#333}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:10px}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:5px}.inner-content{padding:10px 0}label{font-size:14px;color:#333;margin-bottom:5px}input[type=text],input[type=number],select{width:100%;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;outline:none;transition:.3s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#007bff}button{padding:8px 12px;border:none;border-radius:4px;background:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:.3s}button:hover{background:#0056b3}.toggle-group{display:flex;align-items:center;gap:15px}.toggle-item{display:flex;align-items:center;gap:8px}.switch{position:relative;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:19px;width:19px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.radio-item{display:flex;align-items:center;gap:15px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:10px}.options{width:calc(100% - 30px)}.field-size-controls{display:flex;align-items:center;gap:10px}.size-input{width:100px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:15px}.design-footer .btn{background:#007bff;color:#fff;padding:8px 15px;border-radius:4px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:10px}.design-header{flex-direction:column;align-items:flex-start}.toggle-group{flex-direction:column;gap:10px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:10px}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
11255
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Properties</h1>\n <!-- AP 25FEB25 - not used -->\n <!-- <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div> -->\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n</div>\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n </div>\n </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f4f4f4;border-radius:6px;margin-bottom:15px}.header-title{font-size:18px;font-weight:500;color:#333}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:10px}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:5px}.inner-content{padding:10px 0}label{font-size:14px;color:#333;margin-bottom:5px}input[type=text],input[type=number],select{width:100%;height:38px;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;outline:none;transition:.3s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#007bff}button{padding:8px 12px;border:none;border-radius:4px;background:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:.3s}button:hover{background:#0056b3}.toggle-group{display:flex;align-items:center;gap:15px}.toggle-item{display:flex;align-items:center;gap:8px}.switch{position:relative;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:19px;width:19px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.radio-item{display:flex;align-items:center;gap:15px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:10px}.options{width:calc(100% - 30px)}.field-size-controls{display:flex;align-items:center;gap:10px}.size-input{width:100px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:15px}.design-footer .btn{background:#007bff;color:#fff;padding:8px 15px;border-radius:4px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:10px}.design-header{flex-direction:column;align-items:flex-start}.toggle-group{flex-direction:column;gap:10px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:10px}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
11221
11256
|
}
|
|
11222
11257
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
|
|
11223
11258
|
type: Component,
|
|
11224
|
-
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">
|
|
11259
|
+
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<!-- properties.component.html -->\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n <div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Properties</h1>\n <!-- AP 25FEB25 - not used -->\n <!-- <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div> -->\n</div>\n\n<!-- properties.component.html -->\n<div class=\"all-properties\">\n <div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n</div>\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n </div>\n </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.design-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f4f4f4;border-radius:6px;margin-bottom:15px}.header-title{font-size:18px;font-weight:500;color:#333}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:10px}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:5px}.inner-content{padding:10px 0}label{font-size:14px;color:#333;margin-bottom:5px}input[type=text],input[type=number],select{width:100%;height:38px;padding:8px;font-size:14px;border:1px solid #ccc;border-radius:4px;outline:none;transition:.3s}input[type=text]:focus,input[type=number]:focus,select:focus{border-color:#007bff}button{padding:8px 12px;border:none;border-radius:4px;background:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:.3s}button:hover{background:#0056b3}.toggle-group{display:flex;align-items:center;gap:15px}.toggle-item{display:flex;align-items:center;gap:8px}.switch{position:relative;width:40px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:19px;width:19px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.radio-item{display:flex;align-items:center;gap:15px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:10px}.options{width:calc(100% - 30px)}.field-size-controls{display:flex;align-items:center;gap:10px}.size-input{width:100px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:15px}.design-footer .btn{background:#007bff;color:#fff;padding:8px 15px;border-radius:4px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:10px}.design-header{flex-direction:column;align-items:flex-start}.toggle-group{flex-direction:column;gap:10px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:10px}}\n"] }]
|
|
11225
11260
|
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { formButtonHandler: [{
|
|
11226
11261
|
type: Output
|
|
11227
11262
|
}], selectedElementType: [{
|
|
@@ -11270,11 +11305,11 @@ class FormComponent {
|
|
|
11270
11305
|
this.formButtonHandler.emit(event);
|
|
11271
11306
|
}
|
|
11272
11307
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11273
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container
|
|
11308
|
+
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%;height:100vh;padding:10px;border-top:10px solid #86A8CD;border-bottom:10px solid #86A8CD}app-properties{width:25%;height:100vh;overflow-y:auto;padding:10px;border:10px solid #86A8CD}\n"], dependencies: [{ kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
|
|
11274
11309
|
}
|
|
11275
11310
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
|
|
11276
11311
|
type: Component,
|
|
11277
|
-
args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container
|
|
11312
|
+
args: [{ selector: 'app-form-builder', 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%;height:100vh;padding:10px;border-top:10px solid #86A8CD;border-bottom:10px solid #86A8CD}app-properties{width:25%;height:100vh;overflow-y:auto;padding:10px;border:10px solid #86A8CD}\n"] }]
|
|
11278
11313
|
}], propDecorators: { bookletJSON: [{
|
|
11279
11314
|
type: Input
|
|
11280
11315
|
}], bookletId: [{
|