@rangertechnologies/ngnxt 2.1.102 → 2.1.103
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 +2 -2
- package/esm2022/lib/pages/builder/form/form.component.mjs +2 -2
- package/esm2022/lib/pages/builder/properties/properties.component.mjs +2 -2
- package/fesm2022/rangertechnologies-ngnxt.mjs +6 -6
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.103.tgz +0 -0
- package/rangertechnologies-ngnxt-2.1.102.tgz +0 -0
|
@@ -164,11 +164,11 @@ export class ElementComponent {
|
|
|
164
164
|
return styles;
|
|
165
165
|
}
|
|
166
166
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: i1.FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
167
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n <ng-container *ngFor=\"let element of elements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n</div>\n \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\" [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\" class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n </div>\n </div>\n</div>\n \n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n<!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex}.form-builder{width:25%;height:fit-content;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding-left:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.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.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"] }] });
|
|
167
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n <ng-container *ngFor=\"let element of elements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n</div>\n \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\" [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\" class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n </div>\n </div>\n</div>\n \n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n<!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.form-builder{width:25%;height:100vh;overflow-y:auto;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.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.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"] }] });
|
|
168
168
|
}
|
|
169
169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
|
|
170
170
|
type: Component,
|
|
171
|
-
args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n <ng-container *ngFor=\"let element of elements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n</div>\n \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\" [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\" class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n </div>\n </div>\n</div>\n \n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n<!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex}.form-builder{width:25%;height:fit-content;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding-left:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}\n"] }]
|
|
171
|
+
args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\n <!-- AP 25FEB25 - All elements update -->\n<div class=\"center-frame\">\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n\n<!-- Form Builder Section All Elements -->\n<div class=\"form-builder\">\n <ng-container *ngFor=\"let element of elements\">\n <div class=\"element\" (click)=\"addElement(element.type)\">\n <img src=\"../assets/icons/{{ element.img }}.svg\">\n <div class=\"hover-label\">{{ element.label }}</div>\n </div>\n </ng-container>\n</div>\n \n<div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\n<ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\n\n<!-- TextBox -->\n<div *ngIf=\"field.type === 'Text'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"text\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\n </div>\n </div>\n</div>\n\n<!-- Calendar -->\n<div *ngIf=\"field.type === 'Calendar'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"date\" class=\"custom-input\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\n </div>\n </div>\n</div>\n\n<!-- Email -->\n<div *ngIf=\"field.type === 'Email'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Label' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"email\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\n </div>\n </div>\n</div>\n\n<!-- Numbers -->\n<div *ngIf=\"field.type === 'Number'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag> \n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <input type=\"number\" class=\"custom-input\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" \n [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\n </div>\n </div>\n</div>\n \n<!-- TextArea -->\n<div *ngIf=\"field.type === 'TextArea'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Enter your text' }}\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\n </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div> \n <textarea class=\"custom-textarea\" [placeholder]=\"field.question || 'Enter detailed text here...'\" [style.height.px]=\"field.size || 100\"\n [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\" [(ngModel)]=\"field.text\">\n </textarea>\n </div>\n </div>\n</div>\n\n<!-- Label -->\n<div *ngIf=\"field.type === 'Label'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\"\n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n<div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\"/>\n </div>\n </div>\n </div>\n</div>\n\n<!-- Image -->\n<div *ngIf=\"field.type === 'Image'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\"> {{ field.questionText ? field.questionText : 'Upload Image' }} </label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n <input type=\"file\" accept=\"image/*\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n\n <!-- File -->\n<div *ngIf=\"field.type === 'File'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n [class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Upload File' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <input type=\"file\" class=\"custom-input\" />\n </div>\n </div>\n</div>\n \n<!-- CheckBox -->\n<div *ngIf=\"field.type === 'CheckBox'\" class=\"checkbox-field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"checkbox-options-container\">\n <div *ngFor=\"let option of field.options\" class=\"checkbox-option\">\n <input type=\"checkbox\" [id]=\"option.value + i\" [name]=\"field.id\" [value]=\"option.value\" class=\"checkbox-input\">\n <label [for]=\"option.value + i\" class=\"checkbox-label\">{{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div> \n\n<!-- Radio -->\n<div *ngIf=\"field.type === 'Radio'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <div class=\"radio-options-container\">\n <div *ngFor=\"let option of field.options; let j = index\" class=\"radio-option\">\n <input type=\"radio\" [id]=\"'radio-' + field.id + '-' + j\" [name]=\"'radio-group-' + field.id\" [value]=\"option.value\"\n [(ngModel)]=\"field.selectedValue\" class=\"radio-input\">\n <label [for]=\"'radio-' + field.id + '-' + j\" class=\"radio-label\"> {{ option.label }}</label>\n </div>\n </div>\n </div>\n </div>\n</div>\n \n<!-- Dropdown -->\n<div *ngIf=\"field.type === 'Dropdown'\" class=\"field-container\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" \n[class.highlight]=\"selectedFieldIndex === i\" cdkDrag>\n <div class=\"field-wrapper\">\n <div class=\"field-content\">\n <div class=\"label-container\"> \n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" class=\"delete-icon\" />\n </div>\n <select id=\"options\" class=\"dropdown\">\n <option *ngFor=\"let option of field.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n </div>\n </div>\n</div>\n \n<!-- Tables -->\n<!-- <div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\n </table>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n</div> -->\n\n <!-- Book -->\n<!-- <div *ngIf=\"field.type === 'Book'\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\n <div class=\"flex\" style=\"display: flex;\">\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\n <div style=\"width: 97%;\">\n <div class=\"flex lab-conatiner\">\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div>\n </div>\n </div>\n</div> -->\n\n<!-- List -->\n<!-- <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <label>{{ field.questionText }}</label>\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n \n<!-- Button -->\n<!-- <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\n <button>{{ field.questionText }}</button>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\n </div> -->\n\n</ng-container>\n</div>\n</div>\n\n\n\n\n", styles: [".center-frame{display:flex;border:10px solid #86A8CD;border-right-width:0}.form-builder{width:25%;height:100vh;overflow-y:auto;background-color:#fff;padding:10px;border-radius:10px;box-shadow:2px 2px 10px #0000001a}.form-builder .element{display:flex;align-items:center;gap:15px;margin-top:10px;padding:10px;border-radius:5px;background:#e9ecef;cursor:pointer;transition:background .3s ease,color .3s ease;color:#000}.form-builder .element:hover{background:#0250d9;color:#fff}.form-builder .element img{width:20px;height:20px;transition:filter .3s ease}.form-builder .element:hover img{filter:invert(1)}.form-builder .hover-label{font-size:14px;font-weight:500;color:#000;transition:color .3s ease}.form-builder .element:hover .hover-label{color:#fff}.form-builder .section-title{font-weight:700;font-size:16px;margin-top:10px;padding:5px;border-bottom:1px solid #ddd;color:#000}.form-builder .section-title:after{content:\"\\25bc\";float:right;font-size:12px;color:#555}.form-builder .section{margin-bottom:10px}.field-container{padding-right:5px;padding-left:5px}.field-wrapper{background-color:#eff8ff;border:1px solid #E6F3FF;border-radius:5px;padding:10px}.required:after{content:\"*\";color:red;margin-left:5px}.custom-input{width:100%;padding:8px;border:1px solid #DDDBDA;background-color:#fff;border-radius:5px;outline:none}.custom-input:focus{border-color:#00008b;box-shadow:0 0 5px #0000ff80}.delete-icon{width:20px;height:20px;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .1s ease-in-out}.label-container:hover .delete-icon{opacity:1;visibility:visible}.form-preview{width:100%;height:100vh;overflow-y:auto;display:flex;flex-wrap:wrap;align-items:flex-start;padding:10px;height:fit-content;max-height:100vh}.field-content{display:flex;flex-direction:column;gap:5px}.label-container{display:flex;justify-content:space-between;align-items:center}.custom-input,.custom-textarea,.dropdown,.checkbox-options-container,.radio-options-container{width:100%}.dropdown{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:14px;color:#333;outline:none;cursor:pointer}.dropdown:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.checkbox-field-container:hover{box-shadow:0 2px 8px #0000001a}.checkbox-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.checkbox-option,.radio-option{display:flex;align-items:center;gap:8px;padding:8px;background-color:#fff;border-radius:4px;transition:background-color .2s ease}.checkbox-option:hover{background-color:#f1f3f5}.checkbox-input,.radio-input{width:18px;height:18px;accent-color:#4dabf7;cursor:pointer}.checkbox-label,.radio-label{font-size:14px;color:#495057;cursor:pointer;-webkit-user-select:none;user-select:none}.label-container label{font-size:16px;font-weight:600}.required:after{content:\" *\";color:red}.radio-options-container{display:flex;flex-direction:column;gap:5px;padding:8px;min-height:38px;border:1px solid #DDDBDA;background-color:#fff;outline:none;border-radius:6px}.radio-input:checked{border-color:#007bff;background-color:#007bff}.radio-input:checked:after{content:\"\";width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.custom-textarea{width:100%;min-height:100px;border:1px solid #ccc;border-radius:4px;padding:8px;resize:vertical}.highlight{border:2px solid blue;background-color:#0000ff1a}\n"] }]
|
|
172
172
|
}], ctorParameters: () => [{ type: i1.FormBuilderService }], propDecorators: { elementButtonClicked: [{
|
|
173
173
|
type: Output
|
|
174
174
|
}], formContainer: [{
|
|
@@ -19,11 +19,11 @@ export class FormComponent {
|
|
|
19
19
|
this.formButtonHandler.emit(event);
|
|
20
20
|
}
|
|
21
21
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
22
|
-
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
|
|
22
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n <!-- app-element Component -->\n <app-element [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n \n <!-- app-properties Component -->\n <app-properties (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n </div>\n ", styles: [".form-container{display:flex;flex-wrap:wrap;width:100%;height:100vh}app-element{width:75%}app-properties{width:25%;overflow-y:auto;border:10px solid #86A8CD}\n"], dependencies: [{ kind: "component", type: i1.ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["elementButtonClicked"] }, { kind: "component", type: i2.PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
|
|
23
23
|
}
|
|
24
24
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
|
|
25
25
|
type: Component,
|
|
26
|
-
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
|
|
26
|
+
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%}app-properties{width:25%;overflow-y:auto;border:10px solid #86A8CD}\n"] }]
|
|
27
27
|
}], propDecorators: { bookletJSON: [{
|
|
28
28
|
type: Input
|
|
29
29
|
}], bookletId: [{
|
|
@@ -455,11 +455,11 @@ export class PropertiesComponent {
|
|
|
455
455
|
this.formButtonHandler.emit(this.formBuilderService.downloadElement());
|
|
456
456
|
}
|
|
457
457
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1.HttpClient }, { token: i2.FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
458
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n<div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Properties</h1>\n <!-- AP 25FEB25 - not used -->\n <!-- <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div> -->\n</div>\n\n<div class=\"all-properties\">\n<div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n</div>\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n </div>\n </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}body{background:#f9f9f9;color:#333;padding:20px}.design-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:500;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
458
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n<div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Properties</h1>\n <!-- AP 25FEB25 - not used -->\n <!-- <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div> -->\n</div>\n\n<div class=\"all-properties\">\n<div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n</div>\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n </div>\n </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:500;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
459
459
|
}
|
|
460
460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
|
|
461
461
|
type: Component,
|
|
462
|
-
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n<div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Properties</h1>\n <!-- AP 25FEB25 - not used -->\n <!-- <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div> -->\n</div>\n\n<div class=\"all-properties\">\n<div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n</div>\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n </div>\n </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}
|
|
462
|
+
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\n<link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\n<div class=\"properties\">\n\n<!-- Design Header Section -->\n<div class=\"design-header\">\n <h1 class=\"header-title\">Properties</h1>\n <!-- AP 25FEB25 - not used -->\n <!-- <div class=\"menu-container\">\n <div class=\"menu-item\" (click)=\"download()\">\n <span >Download</span>\n </div>\n <div class=\"menu-item\">\n <span>Start</span>\n </div>\n <div class=\"menu-item\">\n <span>Path</span>\n </div>\n <div class=\"menu-item\">\n <span>Clone</span>\n </div>\n </div> -->\n</div>\n\n<div class=\"all-properties\">\n<div *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n\n<!-- Element Properties -->\n<details class=\"first-properties\" open>\n <summary class=\"text-sm \">Elements Properties</summary>\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\n <div class=\"flex-items-center\">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"label-properties\">\n\n<!-- Text Input -->\n<input *ngIf=\"prop.type === 'text'\"\n type=\"text\"\n [placeholder]=\"prop.placeholder\"\n [value]=\"selectedElement[prop.key]\"\n (input)=\"updateProperty(prop.key, $event.target.value)\"\n [class.read-only]=\"selectedElement.readOnly\"\n [readonly]=\"selectedElement.readOnly\"\n class=\"text-sm1 \"/>\n\n<div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">{{ selectedElement.helpText }}</div>\n\n<!-- Font Selection -->\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'font'\" class=\"font-selection1\" [value]=\"selectedElement?.font\"\n (change)=\"updateProperty('font', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option\"> {{ option }} </option>\n </select>\n</div>\n\n<!-- file -->\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\" class=\"file\" [value]=\"selectedElement[prop.key]\"\n(change)=\"updateProperty(prop.key, $event.target.value)\">\n<option value=\"\">Select file category</option>\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n</select>\n\n<!-- Font Weight Selection -->\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\n <!-- <label>{{ prop.label }}</label> -->\n <select *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\" class=\"font-weight\" [value]=\"selectedElement?.fontWeight\"\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\"> {{ option.label }} </option>\n </select>\n</div>\n \n<!-- Toggle Group -->\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\n<div class=\"toggle-item1\">\n <span class=\"toggle-label\">Read Only</span>\n <label class=\"switch\">\n <input type=\"checkbox\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n\n<div class=\"toggle-item2\">\n <span class=\"toggle-label\">Is Hide</span>\n <label class=\"switch\">\n <input type=\"checkbox\" [checked]=\"selectedElement?.isHide\" (change)=\"onToggleChange('isHide', $event)\"/>\n <span class=\"slider\"></span>\n </label>\n</div>\n</div>\n\n<!-- Text Align Buttons -->\n<div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onAlignSelect(option.value)\" \n [class.active]=\"selectedElement?.textAlign === option.value\" class=\"align-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\n <button *ngFor=\"let option of prop.options\" (click)=\"onStyleSelect(option.value)\"\n [class.active]=\"isStyleActive(option.value)\" class=\"style-btn\" [title]=\"option.value\">\n <img [src]=\"'../assets/icons/' + option.icon + '.svg'\" [alt]=\"option.value\" class=\"icon-size\"/>\n </button>\n</div>\n\n<!-- Field Size Controls -->\n <!-- AP 25FEB25 - Change key size -->\n<div *ngIf=\"prop.key === 'size'\" class=\"field-size-controls\">\n <div class=\"size-group\">\n <label class=\"size-label\">Width</label>\n <div class=\"value-container\">\n <input type=\"number\" [value]=\"selectedElement?.size\" (input)=\"updateProperty('size', $event.target.value)\" class=\"size-input\"/>\n </div>\n </div>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n</details>\n\n<!-- Field Elements Properties -->\n<details class=\"second-property\">\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\n <div class=\"flex-items-center \">\n <label class=\"text-sm\">{{ prop.label }}</label>\n <div class=\"input-box-field\">\n <!-- Input Box -->\n <input *ngIf=\"prop.type === 'text'\" type=\"text\" [placeholder]=\"prop.placeholder\" class=\"field-input\"/>\n\n <!-- Radio Group -->\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\n <div class=\"sizes\">\n <div class=\"flex-gap\">\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"selectedElement.required\" (change)=\"onRequiredChange(true)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-label\"> Required </label>\n </div>\n <div class=\"flex-items\">\n <input type=\"radio\" [checked]=\"!selectedElement.required\" (change)=\"onRequiredChange(false)\" name=\"required\" class=\"radio-input\"/>\n <label class=\"text-sm text-gray-400\"> Not Required </label>\n </div>\n </div>\n</div>\n</div> \n<!-- AP 25FEB25 - handled options -->\n<div *ngIf=\"prop.type === 'dropdown' || prop.type === 'checkbox' || prop.type === 'radio' && prop.key === 'options'\" class=\"options-container\">\n <div *ngFor=\"let option of selectedElement[prop.key]; let i = index\" class=\"option-items\">\n <input type=\"text\" [(ngModel)]=\"selectedElement[prop.key][i].label\" placeholder=\"Option {{ i + 1 }}\" class=\"options\"/>\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(selectedElement[prop.key], i)\">\n </div>\n <button (click)=\"addOption(selectedElement[prop.key])\">\n <div class=\"add-varient\">\n <span class=\"text-lg\">+</span>\n <span>Add Variants</span>\n </div>\n </button>\n</div>\n\n</div>\n</div>\n</ng-container>\n</div>\n<div class=\"design-footer\">\n <button class=\"btn\">Cancel</button>\n <button class=\"btn\" (click)=\"handleButtonClick()\">Save</button>\n</div>\n</details>\n</div>\n</div>\n", styles: ["@import\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif}.properties{height:100vh;overflow-y:auto}.design-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:20px}.header-title{font-size:20px;font-weight:500;color:#222}.all-properties details{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:12px;padding:12px;box-shadow:0 2px 8px #0000000d}.all-properties summary{font-size:16px;font-weight:500;cursor:pointer;padding:6px;transition:color .3s}.all-properties summary:hover{color:#007bff}.inner-content{padding:12px 0}label{font-size:14px;font-weight:500;color:#444;margin-bottom:5px;display:block}input[type=text],input[type=number],select{width:100%;height:40px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:6px;outline:none;transition:.3s;background:#f8f8f8}input:focus,select:focus{border-color:#007bff;background:#fff;box-shadow:0 0 5px #007bff4d}button{padding:10px 15px;border:none;border-radius:6px;background:#007bff;color:#fff;font-size:15px;cursor:pointer;transition:.3s}button:hover{background:#0056b3;transform:translateY(-2px)}.toggle-group{display:flex;align-items:center;gap:20px}.toggle-item{display:flex;align-items:center;gap:10px}.switch{position:relative;width:42px;height:22px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:20px;width:20px;left:1px;bottom:1px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(18px)}.radio-item{display:flex;align-items:center;gap:20px}.radio-item input{accent-color:#007bff}.options-container{display:flex;flex-direction:column;gap:12px}.options{width:100%}.field-size-controls{display:flex;align-items:center;gap:12px}.size-input{width:110px;text-align:center}.design-footer{display:flex;justify-content:space-between;margin-top:20px}.design-footer .btn{background:#007bff;color:#fff;padding:10px 18px;border-radius:6px;font-size:15px;transition:.3s}.design-footer .btn:hover{background:#0056b3}@media (max-width: 768px){.properties{max-width:100%;padding:12px}.design-header{flex-direction:column;align-items:flex-start;padding:15px}.toggle-group{flex-direction:column;gap:12px}.field-size-controls{flex-direction:column}.design-footer{flex-direction:column;gap:12px;align-items:center}}\n"] }]
|
|
463
463
|
}], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.FormBuilderService }], propDecorators: { formButtonHandler: [{
|
|
464
464
|
type: Output
|
|
465
465
|
}], selectedElementType: [{
|