@rangertechnologies/ngnxt 2.1.84 → 2.1.85
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/components/pick-location/pick-location.component.mjs +33 -5
- package/esm2022/lib/pages/builder/element/element.component.mjs +5 -3
- package/esm2022/lib/pages/builder/properties/properties.component.mjs +2 -2
- package/esm2022/lib/services/data.service.mjs +3 -3
- package/fesm2022/rangertechnologies-ngnxt.mjs +40 -10
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/lib/components/pick-location/pick-location.component.d.ts +5 -3
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.85.tgz +0 -0
- package/rangertechnologies-ngnxt-2.1.84.tgz +0 -0
|
@@ -4067,8 +4067,8 @@ class DataService {
|
|
|
4067
4067
|
const headers = new HttpHeaders().set('Authorization', `${tkn}`);
|
|
4068
4068
|
headers.append('Accept', 'application/json');
|
|
4069
4069
|
headers.append('Access-Control-Allow-Origin', '*');
|
|
4070
|
-
//
|
|
4071
|
-
this.http.get('https://dev-api.
|
|
4070
|
+
// MR 23JAN24 - This should be removed, for now testing with dev-hse-api
|
|
4071
|
+
this.http.get('https://dev-hse-api.rangerfusion.com/nxt/api/process/?dataType=' + params[0] + '&operation=' + params[1] + '¶m=' + params[2], { headers: headers, observe: 'response' })
|
|
4072
4072
|
.subscribe(response => {
|
|
4073
4073
|
if (response.status == 200) {
|
|
4074
4074
|
resolve(response.body);
|
|
@@ -4488,6 +4488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4488
4488
|
class PickLocationComponent {
|
|
4489
4489
|
i18nService;
|
|
4490
4490
|
ngZone;
|
|
4491
|
+
cdr;
|
|
4491
4492
|
latitude = null;
|
|
4492
4493
|
longitude = null;
|
|
4493
4494
|
zoom = 10;
|
|
@@ -4506,9 +4507,10 @@ class PickLocationComponent {
|
|
|
4506
4507
|
apiKey; // HA10012024 declared Api key to src
|
|
4507
4508
|
constructor(
|
|
4508
4509
|
// private mapsAPILoader: MapsAPILoader,
|
|
4509
|
-
i18nService, ngZone) {
|
|
4510
|
+
i18nService, ngZone, cdr) {
|
|
4510
4511
|
this.i18nService = i18nService;
|
|
4511
4512
|
this.ngZone = ngZone;
|
|
4513
|
+
this.cdr = cdr;
|
|
4512
4514
|
// HA09012024 is to avoid google is undefined error and calling the below created function
|
|
4513
4515
|
}
|
|
4514
4516
|
ngOnInit() {
|
|
@@ -4525,6 +4527,32 @@ class PickLocationComponent {
|
|
|
4525
4527
|
});
|
|
4526
4528
|
}
|
|
4527
4529
|
}
|
|
4530
|
+
// RS 23JAN2025
|
|
4531
|
+
ngOnChanges(changes) {
|
|
4532
|
+
if (changes['address'] && changes['address'].currentValue !== changes['address'].previousValue) {
|
|
4533
|
+
// Ensure latitude & longitude update when the address changes
|
|
4534
|
+
if (this.address) {
|
|
4535
|
+
this.geoCoder.geocode({ address: this.address }, (results, status) => {
|
|
4536
|
+
if (status === 'OK' && results[0]?.geometry?.location) {
|
|
4537
|
+
this.latitude = results[0].geometry.location.lat();
|
|
4538
|
+
this.longitude = results[0].geometry.location.lng();
|
|
4539
|
+
this.markerPosition = { lat: this.latitude, lng: this.longitude };
|
|
4540
|
+
this.center = { lat: this.latitude, lng: this.longitude };
|
|
4541
|
+
this.zoom = 18;
|
|
4542
|
+
this.cdr.detectChanges(); // Force Angular to update the UI
|
|
4543
|
+
}
|
|
4544
|
+
});
|
|
4545
|
+
}
|
|
4546
|
+
else {
|
|
4547
|
+
// Reset if no address is provided
|
|
4548
|
+
this.latitude = null;
|
|
4549
|
+
this.longitude = null;
|
|
4550
|
+
this.markerPosition = null;
|
|
4551
|
+
this.center = null;
|
|
4552
|
+
this.cdr.detectChanges(); // FORCE UI UPDATE
|
|
4553
|
+
}
|
|
4554
|
+
}
|
|
4555
|
+
}
|
|
4528
4556
|
// HA09012024 is to avoid google is undefined error
|
|
4529
4557
|
loadGoogleMapsScript() {
|
|
4530
4558
|
const script = document.createElement('script');
|
|
@@ -4645,13 +4673,13 @@ class PickLocationComponent {
|
|
|
4645
4673
|
closeModal() {
|
|
4646
4674
|
this.showModal = false;
|
|
4647
4675
|
}
|
|
4648
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickLocationComponent, deps: [{ token: I18nService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
4649
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PickLocationComponent, selector: "app-pick-location", inputs: { address: "address", question: "question", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], ngImport: i0, template: "<div>\r\n <!-- <label class=\"she-label\">Location</label> -->\r\n <!-- HA 19DEC23 For translation -->\r\n <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"{{ 'enterLocation' | i18n:i18nService.currentLanguage }}\"\r\n (keydown.enter)=\"$event.preventDefault()\" placeholder=\"{{ 'searchNearestLocation' | i18n:i18nService.currentLanguage }}\" autocorrect=\"off\"\r\n autocapitalize=\"off\" spellcheck=\"off\" type=\"text\" [(ngModel)]=\"address\"\r\n >\r\n <a (click)=\"openMap()\"\r\n style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\r\n <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\r\n <!-- HA 19DEC23 For translation -->\r\n </i> {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\r\n</div>\r\n\r\n<div class=\"map-overlay\" *ngIf=\"showModal\">\r\n <div class=\"map-modal\">\r\n <div class=\"map-modal-content\">\r\n <div class=\"map-modal-header\">\r\n <!-- HA 19DEC23 For translation -->\r\n <h4>{{ 'pickYourLocation' | i18n:i18nService.currentLanguage }}</h4>\r\n <button class=\"close-button\" (click)=\"closeModal()\">X</button>\r\n </div>\r\n <!-- Modal content goes here -->\r\n <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\r\n [fullscreenControl]=\"true\">\r\n <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\r\n (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\r\n </agm-map> -->\r\n <google-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\r\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n </google-map>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
|
|
4676
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickLocationComponent, deps: [{ token: I18nService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4677
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PickLocationComponent, selector: "app-pick-location", inputs: { address: "address", question: "question", apiKey: "apiKey" }, outputs: { locationSelected: "locationSelected" }, viewQueries: [{ propertyName: "searchElementRef", first: true, predicate: ["search"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n <!-- <label class=\"she-label\">Location</label> -->\r\n <!-- HA 19DEC23 For translation -->\r\n <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"{{ 'enterLocation' | i18n:i18nService.currentLanguage }}\"\r\n (keydown.enter)=\"$event.preventDefault()\" placeholder=\"{{ 'searchNearestLocation' | i18n:i18nService.currentLanguage }}\" autocorrect=\"off\"\r\n autocapitalize=\"off\" spellcheck=\"off\" type=\"text\" [(ngModel)]=\"address\"\r\n >\r\n <a (click)=\"openMap()\"\r\n style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\r\n <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\r\n <!-- HA 19DEC23 For translation -->\r\n </i> {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\r\n</div>\r\n\r\n<div class=\"map-overlay\" *ngIf=\"showModal\">\r\n <div class=\"map-modal\">\r\n <div class=\"map-modal-content\">\r\n <div class=\"map-modal-header\">\r\n <!-- HA 19DEC23 For translation -->\r\n <h4>{{ 'pickYourLocation' | i18n:i18nService.currentLanguage }}</h4>\r\n <button class=\"close-button\" (click)=\"closeModal()\">X</button>\r\n </div>\r\n <!-- Modal content goes here -->\r\n <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\r\n [fullscreenControl]=\"true\">\r\n <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\r\n (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\r\n </agm-map> -->\r\n <google-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\r\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n </google-map>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i4.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { kind: "pipe", type: I18nPipe, name: "i18n" }] });
|
|
4650
4678
|
}
|
|
4651
4679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PickLocationComponent, decorators: [{
|
|
4652
4680
|
type: Component,
|
|
4653
4681
|
args: [{ selector: 'app-pick-location', template: "<div>\r\n <!-- <label class=\"she-label\">Location</label> -->\r\n <!-- HA 19DEC23 For translation -->\r\n <input #search class=\"she-line-input form-control\" type=\"text\" placeholder=\"{{ 'enterLocation' | i18n:i18nService.currentLanguage }}\"\r\n (keydown.enter)=\"$event.preventDefault()\" placeholder=\"{{ 'searchNearestLocation' | i18n:i18nService.currentLanguage }}\" autocorrect=\"off\"\r\n autocapitalize=\"off\" spellcheck=\"off\" type=\"text\" [(ngModel)]=\"address\"\r\n >\r\n <a (click)=\"openMap()\"\r\n style=\"color:#48B7FF;position:relative;top:5px;cursor: pointer;\">\r\n <i class=\"fa fa-location-arrow\" aria-hidden=\"true\">\r\n <!-- HA 19DEC23 For translation -->\r\n </i> {{ 'pickLocation' | i18n:i18nService.currentLanguage }}</a>\r\n</div>\r\n\r\n<div class=\"map-overlay\" *ngIf=\"showModal\">\r\n <div class=\"map-modal\">\r\n <div class=\"map-modal-content\">\r\n <div class=\"map-modal-header\">\r\n <!-- HA 19DEC23 For translation -->\r\n <h4>{{ 'pickYourLocation' | i18n:i18nService.currentLanguage }}</h4>\r\n <button class=\"close-button\" (click)=\"closeModal()\">X</button>\r\n </div>\r\n <!-- Modal content goes here -->\r\n <!-- <agm-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" (mapClick)=\"markerDragEnd($event)\"\r\n [fullscreenControl]=\"true\">\r\n <agm-marker [latitude]=\"latitude\" [longitude]=\"longitude\" [markerDraggable]=\"true\"\r\n (dragEnd)=\"markerDragEnd($event)\"></agm-marker>\r\n </agm-map> -->\r\n <google-map [latitude]=\"latitude\" [longitude]=\"longitude\" [zoom]=\"zoom\" [center]=\"center\" (mapClick)=\"onMapClick($event)\">\r\n <map-marker [position]=\"markerPosition\" [options]=\"markerOptions\"></map-marker>\r\n </google-map>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [".she-label{font-weight:400;color:#9a9a9a;padding-bottom:5px;padding-top:5px;padding-right:15px;font-size:14px}.she-line-input{border:none;background:#fff;border-bottom:1px solid #eeeeee;border-radius:0}.fa-location-arrow:before{content:\"\\f124\"}google-map .map-container{width:auto!important}.map-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1}.map-modal{width:600px;background-color:#fff;border-radius:5px;box-shadow:0 2px 4px #0003}.map-modal-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 10px;background-color:#fff;border-bottom:2px solid #e5e5e5}.map-modal-header h3{margin:0}.map-modal-content{padding:20px}.close-button{border:none;cursor:pointer;font-size:21px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}\n"] }]
|
|
4654
|
-
}], ctorParameters: () => [{ type: I18nService }, { type: i0.NgZone }], propDecorators: { searchElementRef: [{
|
|
4682
|
+
}], ctorParameters: () => [{ type: I18nService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { searchElementRef: [{
|
|
4655
4683
|
type: ViewChild,
|
|
4656
4684
|
args: ['search', { static: true }]
|
|
4657
4685
|
}], address: [{
|
|
@@ -10388,6 +10416,8 @@ class ElementComponent {
|
|
|
10388
10416
|
});
|
|
10389
10417
|
console.log("bookletJSON==" + this.bookletJSON);
|
|
10390
10418
|
if (this.bookletJSON) {
|
|
10419
|
+
// AP-23JAN25 - empty string to clear the local storage
|
|
10420
|
+
localStorage.setItem('formElements', "");
|
|
10391
10421
|
localStorage.setItem('status', ("edit"));
|
|
10392
10422
|
localStorage.setItem('unique_id', (this.bookletId));
|
|
10393
10423
|
this.formElements = [];
|
|
@@ -10498,11 +10528,11 @@ class ElementComponent {
|
|
|
10498
10528
|
return styles;
|
|
10499
10529
|
}
|
|
10500
10530
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, deps: [{ token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10501
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"box\">\r\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n\r\n <!-- TextBox -->\r\n <div *ngIf=\"field.type === 'Text'\" class=\"\" style=\"padding: 10px;\r\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- CheckBox -->\r\n <div class=\"CheckBox-options\" *ngIf=\"field.type === 'CheckBox'\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <span class=\"label-text\">{{ field.questionText }}</span>\r\n <div class=\"checkbox-container\">\r\n <label class=\"option-label\">\r\n <!-- Options Section -->\r\n <div *ngIf=\"field.options?.length > 0\" class=\"options-container\">\r\n <div *ngFor=\"let option of field.options; let i = index\" class=\"option-item\">\r\n <!-- Option Input -->\r\n <input type=\"text\" [(ngModel)]=\"option.label\" placeholder=\"Label\" class=\"option-label\"/>\r\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Value\"class=\"option-value\"/>\r\n <!-- Remove Button -->\r\n <button class=\"remove-option-btn\" (click)=\"removeOption(field.options, i)\">\r\n <img src=\"../assets/icons/Trash.svg\" alt=\"Remove Option\" />\r\n </button>\r\n </div>\r\n <!-- Add Option Button -->\r\n <button type=\"button\" class=\"add-option-btn\" (click)=\"addOption(field.options)\">\r\n <span class=\"text-lg\">+</span>\r\n </button>\r\n </div>\r\n </label>\r\n <button class=\"trash-right\" (click)=\"removeElement(field, i)\">\r\n <img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"field.type === 'Dropdown'\" class=\"dropdown-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <select class=\"dropdown-options\"><option *ngFor=\"let option of field.options\" >{{ option }}</option></select>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Calendar -->\r\n <div *ngIf=\"['Calendar'].includes(field.type)\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"date\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"field.type === 'Email'\" class=\"email-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"email\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Numbers -->\r\n <div *ngIf=\"field.type === 'Numbers'\" class=\"numbers-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"number\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- List -->\r\n <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- TextArea -->\r\n <div *ngIf=\"field.type === 'TextArea'\" class=\"textarea-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label [class.required]=\"field.required\">{{ field.questionText }}<span *ngIf=\"field.required\" class=\"text-red-500\">*</span></label>\r\n <textarea [placeholder]=\"field.question || 'Enter text'\" [style.height.px]=\"field.size\" [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\"></textarea>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n\r\n <!-- Radio -->\r\n <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n </div>\r\n <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n </div>\r\n\r\n <!-- Image -->\r\n <div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"file\" accept=\"image/*\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Button -->\r\n <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <button>{{ field.questionText }}</button>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- File -->\r\n <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"file\" />\r\n <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n </table>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n <!-- Book -->\r\n <div *ngIf=\"field.type === 'Book'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"text\" placeholder=\"Enter book title\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n </div>\r\n\r\n <!-- Label -->\r\n <div *ngIf=\"field.type === 'Label'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" >\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"Label\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Form Builder Section All Elements -->\r\n <div class=\"form-builder\">\r\n <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n <div class=\"hover-label\">Calendar</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n <img src=\"../assets/icons/CheckBox.svg\">\r\n <div class=\"hover-label\">Check Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Email')\">\r\n <img src=\"../assets/icons/Email.svg\">\r\n <div class=\"hover-label\">Email</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('File')\">\r\n <img src=\"../assets/icons/File.svg\">\r\n <div class=\"hover-label\">File</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('List')\">\r\n <img src=\"../assets/icons/List.svg\">\r\n <div class=\"hover-label\">List</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Tables')\">\r\n <img src=\"../assets/icons/Table.svg\">\r\n <div class=\"hover-label\">Tables</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Text')\">\r\n <img src=\"../assets/icons/Text.svg\">\r\n <div class=\"hover-label\">Text Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n <img src=\"../assets/icons/TextArea.svg\">\r\n <div class=\"hover-label\">Text Area</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n <img src=\"../assets/icons/Number.svg\">\r\n <div class=\"hover-label\">Numbers</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n <img src=\"../assets/icons/Drop.svg\">\r\n <div class=\"hover-label\">Dropdown</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Image')\">\r\n <img src=\"../assets/Image.svg\">\r\n <div class=\"hover-label\">Image</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Radio')\">\r\n <img src=\"../assets/icons/Radio.svg\">\r\n <div class=\"hover-label\">Radio</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Label')\">\r\n <img src=\"../assets/icons/Label.svg\">\r\n <div class=\"hover-label\">Label</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Book')\">\r\n <img src=\"../assets/icons/Book.svg\">\r\n <div class=\"hover-label\">Book</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Button')\">\r\n <img src=\"../assets/icons/Button.svg\">\r\n <div class=\"hover-label\">Button</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n", styles: [".center-frame{position:absolute;top:68px;right:24%;width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.inner-border{box-sizing:border-box;height:39rem;border-radius:10px}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:relative;right:6px;bottom:91px;width:78%;height:46px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{margin-top:0;padding:16px;height:39rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.textbox-container,.CheckBox-options,.dropdown-container,.date-container{margin-bottom:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.email-comtainer{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.email-comtainer input[type=email]{width:95%;padding:10px;font-size:14px;border:none;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.email-comtainer img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.email-comtainer label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-options{width:94%;position:relative;left:25px;height:100px;border-radius:5px;border:none}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
|
|
10531
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ElementComponent, selector: "app-element", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { elementButtonClicked: "elementButtonClicked" }, viewQueries: [{ propertyName: "formContainer", first: true, predicate: ["formContainer"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n\r\n <!-- TextBox -->\r\n <div *ngIf=\"field.type === 'Text'\" class=\"\" style=\"padding: 10px;\r\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- CheckBox -->\r\n <div class=\"CheckBox-options\" *ngIf=\"field.type === 'CheckBox'\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <span class=\"label-text\">{{ field.questionText }}</span>\r\n <div class=\"checkbox-container\">\r\n <label class=\"option-label\">\r\n <!-- Options Section -->\r\n <div *ngIf=\"field.options?.length > 0\" class=\"options-container\">\r\n <div *ngFor=\"let option of field.options; let i = index\" class=\"option-item\">\r\n <!-- Option Input -->\r\n <input type=\"text\" [(ngModel)]=\"option.label\" placeholder=\"Label\" class=\"option-label\"/>\r\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Value\"class=\"option-value\"/>\r\n <!-- Remove Button -->\r\n <button class=\"remove-option-btn\" (click)=\"removeOption(field.options, i)\">\r\n <img src=\"../assets/icons/Trash.svg\" alt=\"Remove Option\" />\r\n </button>\r\n </div>\r\n <!-- Add Option Button -->\r\n <button type=\"button\" class=\"add-option-btn\" (click)=\"addOption(field.options)\">\r\n <span class=\"text-lg\">+</span>\r\n </button>\r\n </div>\r\n </label>\r\n <button class=\"trash-right\" (click)=\"removeElement(field, i)\">\r\n <img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"field.type === 'Dropdown'\" class=\"dropdown-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <select class=\"dropdown-options\"><option *ngFor=\"let option of field.options\" >{{ option }}</option></select>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n </div>\r\n </div>\r\n</div>\r\n\r\n,\r\n\r\n <!-- List -->\r\n <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">\r\n {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n </label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <textarea\r\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n [style.height.px]=\"field.size || 100\"\r\n [style.width.%]=\"100\"\r\n [readonly]=\"field.readOnly\"\r\n [class.hidden]=\"field.isHide\"\r\n [(ngModel)]=\"field.text\">\r\n </textarea>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Radio -->\r\n <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n </div>\r\n <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n </div>\r\n\r\n <!-- Image -->\r\n <div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"file\" accept=\"image/*\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Button -->\r\n <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <button>{{ field.questionText }}</button>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- File -->\r\n <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"file\" />\r\n <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n </table>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <!-- No input box here -->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <!-- No input box here -->\r\n </div>\r\n </div>\r\n</div>\r\n</ng-container>\r\n </div>\r\n <!-- Form Builder Section All Elements -->\r\n <div class=\"form-builder\">\r\n <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n <div class=\"hover-label\">Calendar</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n <img src=\"../assets/icons/CheckBox.svg\">\r\n <div class=\"hover-label\">Check Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Email')\">\r\n <img src=\"../assets/icons/Email.svg\">\r\n <div class=\"hover-label\">Email</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('File')\">\r\n <img src=\"../assets/icons/File.svg\">\r\n <div class=\"hover-label\">File</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('List')\">\r\n <img src=\"../assets/icons/List.svg\">\r\n <div class=\"hover-label\">List</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Tables')\">\r\n <img src=\"../assets/icons/Table.svg\">\r\n <div class=\"hover-label\">Tables</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Text')\">\r\n <img src=\"../assets/icons/Text.svg\">\r\n <div class=\"hover-label\">Text Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n <img src=\"../assets/icons/TextArea.svg\">\r\n <div class=\"hover-label\">Text Area</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n <img src=\"../assets/icons/Number.svg\">\r\n <div class=\"hover-label\">Numbers</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n <img src=\"../assets/icons/Drop.svg\">\r\n <div class=\"hover-label\">Dropdown</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Image')\">\r\n <img src=\"../assets/Image.svg\">\r\n <div class=\"hover-label\">Image</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Radio')\">\r\n <img src=\"../assets/icons/Radio.svg\">\r\n <div class=\"hover-label\">Radio</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Label')\">\r\n <img src=\"../assets/icons/Label.svg\">\r\n <div class=\"hover-label\">Label</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Book')\">\r\n <img src=\"../assets/icons/Book.svg\">\r\n <div class=\"hover-label\">Book</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Button')\">\r\n <img src=\"../assets/icons/Button.svg\">\r\n <div class=\"hover-label\">Button</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:sticky;bottom:91px;width:78%;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:37rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container,.image-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label,.image-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file],.image-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-options{width:94%;position:relative;left:25px;height:100px;border-radius:5px;border:none}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
|
|
10502
10532
|
}
|
|
10503
10533
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
|
|
10504
10534
|
type: Component,
|
|
10505
|
-
args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"box\">\r\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n\r\n <!-- TextBox -->\r\n <div *ngIf=\"field.type === 'Text'\" class=\"\" style=\"padding: 10px;\r\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- CheckBox -->\r\n <div class=\"CheckBox-options\" *ngIf=\"field.type === 'CheckBox'\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <span class=\"label-text\">{{ field.questionText }}</span>\r\n <div class=\"checkbox-container\">\r\n <label class=\"option-label\">\r\n <!-- Options Section -->\r\n <div *ngIf=\"field.options?.length > 0\" class=\"options-container\">\r\n <div *ngFor=\"let option of field.options; let i = index\" class=\"option-item\">\r\n <!-- Option Input -->\r\n <input type=\"text\" [(ngModel)]=\"option.label\" placeholder=\"Label\" class=\"option-label\"/>\r\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Value\"class=\"option-value\"/>\r\n <!-- Remove Button -->\r\n <button class=\"remove-option-btn\" (click)=\"removeOption(field.options, i)\">\r\n <img src=\"../assets/icons/Trash.svg\" alt=\"Remove Option\" />\r\n </button>\r\n </div>\r\n <!-- Add Option Button -->\r\n <button type=\"button\" class=\"add-option-btn\" (click)=\"addOption(field.options)\">\r\n <span class=\"text-lg\">+</span>\r\n </button>\r\n </div>\r\n </label>\r\n <button class=\"trash-right\" (click)=\"removeElement(field, i)\">\r\n <img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"field.type === 'Dropdown'\" class=\"dropdown-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <select class=\"dropdown-options\"><option *ngFor=\"let option of field.options\" >{{ option }}</option></select>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Calendar -->\r\n <div *ngIf=\"['Calendar'].includes(field.type)\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"date\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Email -->\r\n <div *ngIf=\"field.type === 'Email'\" class=\"email-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"email\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Numbers -->\r\n <div *ngIf=\"field.type === 'Numbers'\" class=\"numbers-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"number\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- List -->\r\n <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- TextArea -->\r\n <div *ngIf=\"field.type === 'TextArea'\" class=\"textarea-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label [class.required]=\"field.required\">{{ field.questionText }}<span *ngIf=\"field.required\" class=\"text-red-500\">*</span></label>\r\n <textarea [placeholder]=\"field.question || 'Enter text'\" [style.height.px]=\"field.size\" [readonly]=\"field.readOnly\" [class.hidden]=\"field.isHide\"></textarea>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n\r\n <!-- Radio -->\r\n <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n </div>\r\n <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n </div>\r\n\r\n <!-- Image -->\r\n <div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"file\" accept=\"image/*\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Button -->\r\n <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <button>{{ field.questionText }}</button>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- File -->\r\n <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"file\" />\r\n <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n </table>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n <!-- Book -->\r\n <div *ngIf=\"field.type === 'Book'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"text\" placeholder=\"Enter book title\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n </div>\r\n\r\n <!-- Label -->\r\n <div *ngIf=\"field.type === 'Label'\" class=\"calender-container\" cdkDrag (click)=\"selectElement(i)\" >\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"Label\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field,i)\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Form Builder Section All Elements -->\r\n <div class=\"form-builder\">\r\n <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n <div class=\"hover-label\">Calendar</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n <img src=\"../assets/icons/CheckBox.svg\">\r\n <div class=\"hover-label\">Check Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Email')\">\r\n <img src=\"../assets/icons/Email.svg\">\r\n <div class=\"hover-label\">Email</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('File')\">\r\n <img src=\"../assets/icons/File.svg\">\r\n <div class=\"hover-label\">File</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('List')\">\r\n <img src=\"../assets/icons/List.svg\">\r\n <div class=\"hover-label\">List</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Tables')\">\r\n <img src=\"../assets/icons/Table.svg\">\r\n <div class=\"hover-label\">Tables</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Text')\">\r\n <img src=\"../assets/icons/Text.svg\">\r\n <div class=\"hover-label\">Text Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n <img src=\"../assets/icons/TextArea.svg\">\r\n <div class=\"hover-label\">Text Area</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n <img src=\"../assets/icons/Number.svg\">\r\n <div class=\"hover-label\">Numbers</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n <img src=\"../assets/icons/Drop.svg\">\r\n <div class=\"hover-label\">Dropdown</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Image')\">\r\n <img src=\"../assets/Image.svg\">\r\n <div class=\"hover-label\">Image</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Radio')\">\r\n <img src=\"../assets/icons/Radio.svg\">\r\n <div class=\"hover-label\">Radio</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Label')\">\r\n <img src=\"../assets/icons/Label.svg\">\r\n <div class=\"hover-label\">Label</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Book')\">\r\n <img src=\"../assets/icons/Book.svg\">\r\n <div class=\"hover-label\">Book</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Button')\">\r\n <img src=\"../assets/icons/Button.svg\">\r\n <div class=\"hover-label\">Button</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n\r\n", styles: [".center-frame{position:absolute;top:68px;right:24%;width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.inner-border{box-sizing:border-box;height:39rem;border-radius:10px}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:relative;right:6px;bottom:91px;width:78%;height:46px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{margin-top:0;padding:16px;height:39rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.textbox-container,.CheckBox-options,.dropdown-container,.date-container{margin-bottom:10px}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.email-comtainer{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.email-comtainer input[type=email]{width:95%;padding:10px;font-size:14px;border:none;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.email-comtainer img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.email-comtainer label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-options{width:94%;position:relative;left:25px;height:100px;border-radius:5px;border:none}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\n"] }]
|
|
10535
|
+
args: [{ selector: 'app-element', template: "<!-- AP 22JAN25 - form preview and All form elements -->\r\n<div class=\"center-frame\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"form-preview\" cdkDropList [cdkDropListData]=\"formElements\" (cdkDropListDropped)=\"drop($event)\">\r\n <ng-container *ngFor=\"let field of formElements; let i = index\" getProperties().elementProps>\r\n\r\n <!-- TextBox -->\r\n <div *ngIf=\"field.type === 'Text'\" class=\"\" style=\"padding: 10px;\r\n background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'lable' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"text\" [placeholder]=\"field.question || 'Enter text'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.text\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- CheckBox -->\r\n <div class=\"CheckBox-options\" *ngIf=\"field.type === 'CheckBox'\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <span class=\"label-text\">{{ field.questionText }}</span>\r\n <div class=\"checkbox-container\">\r\n <label class=\"option-label\">\r\n <!-- Options Section -->\r\n <div *ngIf=\"field.options?.length > 0\" class=\"options-container\">\r\n <div *ngFor=\"let option of field.options; let i = index\" class=\"option-item\">\r\n <!-- Option Input -->\r\n <input type=\"text\" [(ngModel)]=\"option.label\" placeholder=\"Label\" class=\"option-label\"/>\r\n <input type=\"text\" [(ngModel)]=\"option.value\" placeholder=\"Value\"class=\"option-value\"/>\r\n <!-- Remove Button -->\r\n <button class=\"remove-option-btn\" (click)=\"removeOption(field.options, i)\">\r\n <img src=\"../assets/icons/Trash.svg\" alt=\"Remove Option\" />\r\n </button>\r\n </div>\r\n <!-- Add Option Button -->\r\n <button type=\"button\" class=\"add-option-btn\" (click)=\"addOption(field.options)\">\r\n <span class=\"text-lg\">+</span>\r\n </button>\r\n </div>\r\n </label>\r\n <button class=\"trash-right\" (click)=\"removeElement(field, i)\">\r\n <img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" />\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown -->\r\n <div *ngIf=\"field.type === 'Dropdown'\" class=\"dropdown-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <select class=\"dropdown-options\"><option *ngFor=\"let option of field.options\" >{{ option }}</option></select>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Calendar -->\r\n<div *ngIf=\"['Calendar'].includes(field.type)\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Select Date' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"date\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.date\" />\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Email -->\r\n<div *ngIf=\"field.type === 'Email'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"email\" [placeholder]=\"field.question || 'Enter email'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.email\" />\r\n </div>\r\n </div>\r\n</div>\r\n\r\n\r\n <!-- Numbers -->\r\n<div *ngIf=\"field.type === 'Numbers'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <input type=\"number\" [placeholder]=\"field.question || 'Enter number'\" [readonly]=\"field.isReadOnly\" [class.hidden]=\"field.isHidden\" [(ngModel)]=\"field.value\" />\r\n </div>\r\n </div>\r\n</div>\r\n\r\n,\r\n\r\n <!-- List -->\r\n <div *ngIf=\"field.type === 'List'\" class=\"list-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <ul><li *ngFor=\"let item of field.items\">{{ item }}</li></ul>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- TextArea -->\r\n<div *ngIf=\"field.type === 'TextArea'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">\r\n {{ field.questionText ? field.questionText : 'Enter your text' }}\r\n <span *ngIf=\"field.required\" class=\"text-red-500\">*</span>\r\n </label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <textarea\r\n [placeholder]=\"field.question || 'Enter detailed text here...'\"\r\n [style.height.px]=\"field.size || 100\"\r\n [style.width.%]=\"100\"\r\n [readonly]=\"field.readOnly\"\r\n [class.hidden]=\"field.isHide\"\r\n [(ngModel)]=\"field.text\">\r\n </textarea>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Radio -->\r\n <div *ngIf=\"field.type === 'Radio'\" class=\"Radio-options\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <div *ngFor=\"let option of field.options\" class=\"radio-item\">\r\n <label><input type=\"radio\" name=\"{{ field.questionText }}\" /><span>{{ option }}</span></label>\r\n </div>\r\n <button class=\"delete-btn2\" (click)=\"removeElement(field, i)\"><img src=\"../assets/icons/Trash.svg\" alt=\"Delete\" /></button>\r\n </div>\r\n\r\n <!-- Image -->\r\n <div *ngIf=\"field.type === 'Image'\" class=\"image-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"file\" accept=\"image/*\" />\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- Button -->\r\n <div *ngIf=\"field.type === 'Button'\" class=\"button-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <button>{{ field.questionText }}</button>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n <!-- File -->\r\n <div *ngIf=\"field.type === 'File'\" class=\"file-field-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <input type=\"file\" />\r\n <img class=\"trash-right\" src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n\r\n<!-- Tables -->\r\n<div *ngIf=\"field.type === 'Tables'\" class=\"table-container\" cdkDrag (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\">\r\n <label>{{ field.questionText }}</label>\r\n <table [style.width.px]=\"field.colWidth\" [style.height.%]=\"field.rowHeight\">\r\n <thead><tr><th *ngFor=\"let header of field.headers\" [style.width.px]=\"field.colWidth / field.colNos\">{{ header }}</th></tr></thead>\r\n <tbody><tr *ngFor=\"let row of field.rows\"><td *ngFor=\"let cell of row\">{{ cell }}</td></tr></tbody>\r\n </table>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n</div>\r\n\r\n\r\n <!-- Book -->\r\n<div *ngIf=\"field.type === 'Book'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Book Title' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <!-- No input box here -->\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Label -->\r\n<div *ngIf=\"field.type === 'Label'\" class=\"\" style=\"padding: 10px; background-color: whitesmoke;\" (click)=\"selectElement(i)\" [ngStyle]=\"getFontStyles(field)\" cdkDrag>\r\n <div class=\"flex\" style=\"display: flex;\">\r\n <div class=\"all-dots\"><div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div></div>\r\n <div style=\"width: 97%;\">\r\n <div class=\"flex lab-conatiner\">\r\n <label [class.required]=\"field.required\">{{ field.questionText ? field.questionText : 'Label' }}</label>\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeElement(field, i)\" />\r\n </div>\r\n <!-- No input box here -->\r\n </div>\r\n </div>\r\n</div>\r\n</ng-container>\r\n </div>\r\n <!-- Form Builder Section All Elements -->\r\n <div class=\"form-builder\">\r\n <div class=\"element\" (click)=\"addElement('Calendar')\">\r\n <img class=\"calendar-img\" src=\"../assets/icons/Calendar.svg\">\r\n <div class=\"hover-label\">Calendar</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('CheckBox')\">\r\n <img src=\"../assets/icons/CheckBox.svg\">\r\n <div class=\"hover-label\">Check Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Email')\">\r\n <img src=\"../assets/icons/Email.svg\">\r\n <div class=\"hover-label\">Email</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('File')\">\r\n <img src=\"../assets/icons/File.svg\">\r\n <div class=\"hover-label\">File</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('List')\">\r\n <img src=\"../assets/icons/List.svg\">\r\n <div class=\"hover-label\">List</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Tables')\">\r\n <img src=\"../assets/icons/Table.svg\">\r\n <div class=\"hover-label\">Tables</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Text')\">\r\n <img src=\"../assets/icons/Text.svg\">\r\n <div class=\"hover-label\">Text Box</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('TextArea')\">\r\n <img src=\"../assets/icons/TextArea.svg\">\r\n <div class=\"hover-label\">Text Area</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Numbers')\">\r\n <img src=\"../assets/icons/Number.svg\">\r\n <div class=\"hover-label\">Numbers</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Dropdown')\">\r\n <img src=\"../assets/icons/Drop.svg\">\r\n <div class=\"hover-label\">Dropdown</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Image')\">\r\n <img src=\"../assets/Image.svg\">\r\n <div class=\"hover-label\">Image</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Radio')\">\r\n <img src=\"../assets/icons/Radio.svg\">\r\n <div class=\"hover-label\">Radio</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Label')\">\r\n <img src=\"../assets/icons/Label.svg\">\r\n <div class=\"hover-label\">Label</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Book')\">\r\n <img src=\"../assets/icons/Book.svg\">\r\n <div class=\"hover-label\">Book</div>\r\n </div>\r\n\r\n <div class=\"element\" (click)=\"addElement('Button')\">\r\n <img src=\"../assets/icons/Button.svg\">\r\n <div class=\"hover-label\">Button</div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n\r\n\r\n\r\n", styles: [".center-frame{width:71%;padding:26px;box-sizing:border-box;background-color:#edf1f5}.box{box-sizing:border-box}.form-builder{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;position:sticky;bottom:91px;width:78%;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}.element{position:relative;text-align:center;cursor:pointer;padding:7px;color:#94a3b8;width:49px;height:44px;border-radius:6px;transition:background-color .3s,color .3s}.element:hover{background-color:#3374f2;color:#fff;border-radius:5px}.calendar-img{position:relative;top:-6px}.element img:hover{color:#fff}.hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translate(-50%);background-color:#233859;color:#fff;padding:4px 8px;font-size:12px;border-radius:4px;white-space:nowrap}.element:hover .hover-label{display:block}.form-preview{padding:16px;height:37rem;overflow-y:auto;border-radius:8px;background-color:#fff;display:flex;flex-wrap:wrap;gap:10px}.form-preview[cdkDropListOrientation=vertical]{flex-direction:column}.form-preview[cdkDropListOrientation=horizontal]{flex-direction:row}.lab-conatiner{justify-content:space-between;display:flex}.all-dots{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;margin-top:15px;margin-right:10px}.all-dots>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.all-dots1{display:grid;gap:9px 0px;grid-template-columns:auto auto;width:18px;position:relative;top:93px;right:5px;margin-bottom:-19px}.all-dots1>div{height:5px;width:4px;background-color:#bbb;border-radius:50%}.textbox-container label{flex-grow:1}.trash-right{width:28px;position:relative;background-color:#f5ebea;height:27px;border-radius:50px}.trash-right img{position:relative;left:23%;top:3px}.table-container{overflow-x:auto}.textbox-container{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:10px auto;background-color:#f6f6f6;padding:10px 15px;border-radius:5px;box-shadow:0 1px 3px #0000001a;position:relative}.textbox-container label{font-size:14px;width:100px;color:#15234b;margin-bottom:5px;display:block;position:relative;left:27px;top:-12px}.textbox-container input[type=text]{width:95%;height:40px;padding:0 0 0 10px;font-size:14px;border:none;border-radius:5px;background-color:#fff;color:#333;position:absolute;left:40px;top:39px}.textbox-container input[type=text]::placeholder{color:#b8bcca;font-style:italic}.textbox-container input[type=text]:hover,.textbox-container input[type=text]:focus{outline:none;border:1px solid #15234b;box-shadow:0 0 5px #15234b4d}.textbox-container .remove-icon{position:relative;top:-40px;right:-17px;font-size:18px;color:#ff4d4d;cursor:pointer;transition:transform .2s,color .2s}.textbox-container .remove-icon:hover{transform:scale(1.2);color:#d11a2a}.table-container{width:100%;max-width:600px;margin:20px auto;background-color:#d9d9d9;padding:15px;height:47%;border-radius:5px;box-shadow:0 1px 3px #0000001a}.table-container label{font-size:16px;font-weight:700;color:#15234b;margin-bottom:10px;display:block;width:200px;position:relative;top:-53px;left:21px}table{width:557px;height:90%;position:relative;left:20px;top:-58px;border-collapse:collapse;margin-top:10px;text-align:left}table th{background-color:#e4881e;color:#fff;padding:10px;font-size:14px;text-transform:uppercase}table thead{height:38px}table td{background-color:#fff;color:#333;padding:10px;font-size:14px;border:1px solid #ddd}table tbody tr:nth-child(2n) td{background-color:#f9f9f9}table tbody tr:hover td{background-color:#f1f1f1;transition:background-color .2s ease-in-out}.trash-right1{width:28px;position:relative;top:-233px;left:96%;background-color:#d7bbc3;height:27px;border-radius:50px}.trash-right1 img{position:relative;left:23%;top:4px}.file-field-container,.image-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.file-field-container label,.image-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.file-field-container input[type=file],.image-container input[type=file]{width:95%;padding:10px;font-size:14px;position:relative;left:22px;border-radius:5px;background-color:#fff;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:border-color .3s ease,box-shadow .3s ease}.file-field-container input[type=file]:hover,.file-field-container input[type=file]:focus{border-color:#007bff;box-shadow:0 0 4px #007bff80;outline:none}.file-field-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.file-field-container img:hover{opacity:1}.dropdown-container{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:11px;border:none;border-radius:8px;background-color:#f6f6f6;width:47%;height:98px;position:relative}.dropdown-container img{width:20px;height:20px;cursor:pointer;position:absolute;top:10px;right:10px;opacity:.7;transition:opacity .3s ease}.dropdown-container label{font-size:14px;color:#333;margin-bottom:-1px;position:relative;left:26px}.dropdown-options{width:94%;position:relative;left:25px;height:100px;border-radius:5px;border:none}.CheckBox-options{display:flex;flex-direction:column;gap:10px;height:94px;width:45%;padding:10px;background-color:#f6f6f6;border-radius:8px;box-shadow:0 2px 4px #0000001a}.checkbox-container{display:flex;align-items:center;justify-content:space-between;padding:8px;border-radius:6px;background-color:#fff;position:relative;right:-25px;width:94%}.label-text{width:93px;position:relative;left:27px}.option-label{display:flex;align-items:center;gap:10px;position:relative;top:5px;left:10px;font-size:14px;font-weight:500;color:gray;width:83px}.option-label input[type=checkbox]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.label-text{margin-left:5px}.option-value{position:relative;left:113px;top:-19px}.add-option-btn{position:absolute;top:5px;left:273px;border:none}.remove-option-btn{position:absolute;top:4px;left:310px;border:none}.delete-btn1{position:relative;top:-39px;left:18px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}.delete-btn1 img{width:18px;height:18px}.Radio-options{display:flex;flex-direction:column;padding:10px;background-color:#f6f6f6;height:94px;width:45%;border-radius:8px;box-shadow:0 2px 4px #0000001a}.radio-container{display:flex;flex-direction:column;position:relative;top:1px;right:-26px;width:94%;height:43px;padding:10px;border-radius:6px;background-color:#fff}.radio-label{font-size:14px;color:#000;margin-bottom:8px;width:104px;height:21px;position:relative;left:31px}.radio-group{display:flex;gap:20px}.radio-item{display:flex;align-items:center}.option-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.option-label input[type=radio]{width:18px;height:18px;accent-color:#007bff;cursor:pointer}.radio-text{margin-left:5px}.delete-btn2{position:relative;top:-33px;left:374px;width:24px;background:none;border:none;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center;transition:transform .2s ease-in-out}.delete-btn2 img{width:18px;height:18px}\n"] }]
|
|
10506
10536
|
}], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
|
|
10507
10537
|
type: Output
|
|
10508
10538
|
}], formContainer: [{
|
|
@@ -10976,11 +11006,11 @@ class PropertiesComponent {
|
|
|
10976
11006
|
});
|
|
10977
11007
|
}
|
|
10978
11008
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1$1.HttpClient }, { token: FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10979
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n <h1 class=\"header-title\">Element Properties</h1>\r\n <div class=\"menu-container\">\r\n <div class=\"menu-item\" (click)=\"download()\">\r\n <span >Download</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Start</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Path</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Clone</span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n {{ errorMessage }}\r\n </div>\r\n <!-- Element Properties -->\r\n <details class=\"first-properties\" open>\r\n <summary class=\"text-sm \">Elements Properties</summary>\r\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n <div class=\"flex-items-center\">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"label-properties\">\r\n <!-- Text Input -->\r\n <input *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [class.read-only]=\"selectedElement.readOnly\"\r\n [readonly]=\"selectedElement.readOnly\"\r\n class=\"text-sm1 \"\r\n />\r\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n {{ selectedElement.helpText }}\r\n </div>\r\n\r\n\r\n <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n class=\"font-selection1\"\r\n [value]=\"selectedElement?.font\"\r\n (change)=\"updateProperty('font', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n class=\"font-weight1 \"\r\n [value]=\"selectedElement?.fontWeight\"\r\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n <!-- Number Input with Unit -->\r\n <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n <div class=\"size-input-group\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [min]=\"prop.min || 1\"\r\n [max]=\"prop.max || 999999\"\r\n class=\"size-value\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n <span class=\"toggle-label\">Read Only</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.readOnly\"\r\n (change)=\"onToggleChange('readOnly', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n <span class=\"toggle-label\">Is Hide</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.isHide\"\r\n (change)=\"onToggleChange('isHide', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n</div>\r\n\r\n <!-- Text Align Buttons -->\r\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onAlignSelect(option.value)\"\r\n [class.active]=\"selectedElement?.textAlign === option.value\"\r\n class=\"align-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n <label>{{ prop.label }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onStyleSelect(option.value)\"\r\n [class.active]=\"isStyleActive(option.value)\"\r\n class=\"style-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Width</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.width\"\r\n (input)=\"updateProperty('width', $event.target.value)\"\r\n class=\"size-input\"\r\n\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Height</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.height\"\r\n (input)=\"updateProperty('height', $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </details>\r\n\r\n <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n <div class=\"flex-items-center \">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"input-box-field\">\r\n <!-- Input Box -->\r\n <input\r\n *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n class=\"field-input\"\r\n />\r\n <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n <div class=\"sizes\">\r\n <div class=\"flex-gap\">\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"selectedElement.required\"\r\n (change)=\"onRequiredChange(true)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-label\"\r\n >\r\n Required\r\n </label>\r\n </div>\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"!selectedElement.required\"\r\n (change)=\"onRequiredChange(false)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-sm text-gray-400\"\r\n >\r\n Not Required\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n <div\r\n *ngFor=\"let option of prop.options; let i = index\"\r\n class=\"option-items\"\r\n >\r\n <!-- Option Input -->\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].label\"\r\n placeholder=\"Option {{ i + 1 }}\"\r\n class=\"options\"\r\n />\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].value\"\r\n placeholder=\"Value\"\r\n class=\"values\"\r\n />\r\n <!-- Remove Button -->\r\n <div class=\"remove\">\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n </div>\r\n <!-- Add Button -->\r\n <button\r\n type=\"button\"\r\n class=\"add-btn\"\r\n (click)=\"addOption(prop.options)\"\r\n >\r\n <div class=\"add-varient\">\r\n <span class=\"text-lg\">+</span>\r\n <span>Add Variants</span></div>\r\n </button>\r\n</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"design-footer\">\r\n <button class=\"btn\">Cancel</button>\r\n <button class=\"btn\" (click)=\"save()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;width:25%;top:70px}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
11009
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n <h1 class=\"header-title\">Element Properties</h1>\r\n <div class=\"menu-container\">\r\n <div class=\"menu-item\" (click)=\"download()\">\r\n <span >Download</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Start</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Path</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Clone</span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n {{ errorMessage }}\r\n </div>\r\n <!-- Element Properties -->\r\n <details class=\"first-properties\" open>\r\n <summary class=\"text-sm \">Elements Properties</summary>\r\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n <div class=\"flex-items-center\">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"label-properties\">\r\n <!-- Text Input -->\r\n <input *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [class.read-only]=\"selectedElement.readOnly\"\r\n [readonly]=\"selectedElement.readOnly\"\r\n class=\"text-sm1 \"\r\n />\r\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n {{ selectedElement.helpText }}\r\n </div>\r\n\r\n\r\n <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n class=\"font-selection1\"\r\n [value]=\"selectedElement?.font\"\r\n (change)=\"updateProperty('font', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n class=\"font-weight1 \"\r\n [value]=\"selectedElement?.fontWeight\"\r\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n <!-- Number Input with Unit -->\r\n <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n <div class=\"size-input-group\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [min]=\"prop.min || 1\"\r\n [max]=\"prop.max || 999999\"\r\n class=\"size-value\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n <span class=\"toggle-label\">Read Only</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.readOnly\"\r\n (change)=\"onToggleChange('readOnly', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n <span class=\"toggle-label\">Is Hide</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.isHide\"\r\n (change)=\"onToggleChange('isHide', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n</div>\r\n\r\n <!-- Text Align Buttons -->\r\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onAlignSelect(option.value)\"\r\n [class.active]=\"selectedElement?.textAlign === option.value\"\r\n class=\"align-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n <label>{{ prop.label }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onStyleSelect(option.value)\"\r\n [class.active]=\"isStyleActive(option.value)\"\r\n class=\"style-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Width</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.width\"\r\n (input)=\"updateProperty('width', $event.target.value)\"\r\n class=\"size-input\"\r\n\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Height</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.height\"\r\n (input)=\"updateProperty('height', $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </details>\r\n\r\n <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n <div class=\"flex-items-center \">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"input-box-field\">\r\n <!-- Input Box -->\r\n <input\r\n *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n class=\"field-input\"\r\n />\r\n <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n <div class=\"sizes\">\r\n <div class=\"flex-gap\">\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"selectedElement.required\"\r\n (change)=\"onRequiredChange(true)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-label\"\r\n >\r\n Required\r\n </label>\r\n </div>\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"!selectedElement.required\"\r\n (change)=\"onRequiredChange(false)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-sm text-gray-400\"\r\n >\r\n Not Required\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n <div\r\n *ngFor=\"let option of prop.options; let i = index\"\r\n class=\"option-items\"\r\n >\r\n <!-- Option Input -->\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].label\"\r\n placeholder=\"Option {{ i + 1 }}\"\r\n class=\"options\"\r\n />\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].value\"\r\n placeholder=\"Value\"\r\n class=\"values\"\r\n />\r\n <!-- Remove Button -->\r\n <div class=\"remove\">\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n </div>\r\n <!-- Add Button -->\r\n <button\r\n type=\"button\"\r\n class=\"add-btn\"\r\n (click)=\"addOption(prop.options)\"\r\n >\r\n <div class=\"add-varient\">\r\n <span class=\"text-lg\">+</span>\r\n <span>Add Variants</span></div>\r\n </button>\r\n</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"design-footer\">\r\n <button class=\"btn\">Cancel</button>\r\n <button class=\"btn\" (click)=\"save()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;top:0;width:25%}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
10980
11010
|
}
|
|
10981
11011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
|
|
10982
11012
|
type: Component,
|
|
10983
|
-
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n <h1 class=\"header-title\">Element Properties</h1>\r\n <div class=\"menu-container\">\r\n <div class=\"menu-item\" (click)=\"download()\">\r\n <span >Download</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Start</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Path</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Clone</span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n {{ errorMessage }}\r\n </div>\r\n <!-- Element Properties -->\r\n <details class=\"first-properties\" open>\r\n <summary class=\"text-sm \">Elements Properties</summary>\r\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n <div class=\"flex-items-center\">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"label-properties\">\r\n <!-- Text Input -->\r\n <input *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [class.read-only]=\"selectedElement.readOnly\"\r\n [readonly]=\"selectedElement.readOnly\"\r\n class=\"text-sm1 \"\r\n />\r\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n {{ selectedElement.helpText }}\r\n </div>\r\n\r\n\r\n <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n class=\"font-selection1\"\r\n [value]=\"selectedElement?.font\"\r\n (change)=\"updateProperty('font', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n class=\"font-weight1 \"\r\n [value]=\"selectedElement?.fontWeight\"\r\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n <!-- Number Input with Unit -->\r\n <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n <div class=\"size-input-group\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [min]=\"prop.min || 1\"\r\n [max]=\"prop.max || 999999\"\r\n class=\"size-value\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n <span class=\"toggle-label\">Read Only</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.readOnly\"\r\n (change)=\"onToggleChange('readOnly', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n <span class=\"toggle-label\">Is Hide</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.isHide\"\r\n (change)=\"onToggleChange('isHide', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n</div>\r\n\r\n <!-- Text Align Buttons -->\r\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onAlignSelect(option.value)\"\r\n [class.active]=\"selectedElement?.textAlign === option.value\"\r\n class=\"align-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n <label>{{ prop.label }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onStyleSelect(option.value)\"\r\n [class.active]=\"isStyleActive(option.value)\"\r\n class=\"style-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Width</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.width\"\r\n (input)=\"updateProperty('width', $event.target.value)\"\r\n class=\"size-input\"\r\n\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Height</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.height\"\r\n (input)=\"updateProperty('height', $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </details>\r\n\r\n <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n <div class=\"flex-items-center \">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"input-box-field\">\r\n <!-- Input Box -->\r\n <input\r\n *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n class=\"field-input\"\r\n />\r\n <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n <div class=\"sizes\">\r\n <div class=\"flex-gap\">\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"selectedElement.required\"\r\n (change)=\"onRequiredChange(true)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-label\"\r\n >\r\n Required\r\n </label>\r\n </div>\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"!selectedElement.required\"\r\n (change)=\"onRequiredChange(false)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-sm text-gray-400\"\r\n >\r\n Not Required\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n <div\r\n *ngFor=\"let option of prop.options; let i = index\"\r\n class=\"option-items\"\r\n >\r\n <!-- Option Input -->\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].label\"\r\n placeholder=\"Option {{ i + 1 }}\"\r\n class=\"options\"\r\n />\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].value\"\r\n placeholder=\"Value\"\r\n class=\"values\"\r\n />\r\n <!-- Remove Button -->\r\n <div class=\"remove\">\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n </div>\r\n <!-- Add Button -->\r\n <button\r\n type=\"button\"\r\n class=\"add-btn\"\r\n (click)=\"addOption(prop.options)\"\r\n >\r\n <div class=\"add-varient\">\r\n <span class=\"text-lg\">+</span>\r\n <span>Add Variants</span></div>\r\n </button>\r\n</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"design-footer\">\r\n <button class=\"btn\">Cancel</button>\r\n <button class=\"btn\" (click)=\"save()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;width:25%;top:70px}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
|
|
11013
|
+
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n <h1 class=\"header-title\">Element Properties</h1>\r\n <div class=\"menu-container\">\r\n <div class=\"menu-item\" (click)=\"download()\">\r\n <span >Download</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Start</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Path</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Clone</span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n {{ errorMessage }}\r\n </div>\r\n <!-- Element Properties -->\r\n <details class=\"first-properties\" open>\r\n <summary class=\"text-sm \">Elements Properties</summary>\r\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n <div class=\"flex-items-center\">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"label-properties\">\r\n <!-- Text Input -->\r\n <input *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [class.read-only]=\"selectedElement.readOnly\"\r\n [readonly]=\"selectedElement.readOnly\"\r\n class=\"text-sm1 \"\r\n />\r\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n {{ selectedElement.helpText }}\r\n </div>\r\n\r\n\r\n <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n class=\"font-selection1\"\r\n [value]=\"selectedElement?.font\"\r\n (change)=\"updateProperty('font', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n class=\"font-weight1 \"\r\n [value]=\"selectedElement?.fontWeight\"\r\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n <!-- Number Input with Unit -->\r\n <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n <div class=\"size-input-group\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [min]=\"prop.min || 1\"\r\n [max]=\"prop.max || 999999\"\r\n class=\"size-value\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n <span class=\"toggle-label\">Read Only</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.readOnly\"\r\n (change)=\"onToggleChange('readOnly', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n <span class=\"toggle-label\">Is Hide</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.isHide\"\r\n (change)=\"onToggleChange('isHide', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n</div>\r\n\r\n <!-- Text Align Buttons -->\r\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onAlignSelect(option.value)\"\r\n [class.active]=\"selectedElement?.textAlign === option.value\"\r\n class=\"align-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n <label>{{ prop.label }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onStyleSelect(option.value)\"\r\n [class.active]=\"isStyleActive(option.value)\"\r\n class=\"style-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Width</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.width\"\r\n (input)=\"updateProperty('width', $event.target.value)\"\r\n class=\"size-input\"\r\n\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Height</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.height\"\r\n (input)=\"updateProperty('height', $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </details>\r\n\r\n <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n <div class=\"flex-items-center \">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"input-box-field\">\r\n <!-- Input Box -->\r\n <input\r\n *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n class=\"field-input\"\r\n />\r\n <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n <div class=\"sizes\">\r\n <div class=\"flex-gap\">\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"selectedElement.required\"\r\n (change)=\"onRequiredChange(true)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-label\"\r\n >\r\n Required\r\n </label>\r\n </div>\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"!selectedElement.required\"\r\n (change)=\"onRequiredChange(false)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-sm text-gray-400\"\r\n >\r\n Not Required\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n <div\r\n *ngFor=\"let option of prop.options; let i = index\"\r\n class=\"option-items\"\r\n >\r\n <!-- Option Input -->\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].label\"\r\n placeholder=\"Option {{ i + 1 }}\"\r\n class=\"options\"\r\n />\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].value\"\r\n placeholder=\"Value\"\r\n class=\"values\"\r\n />\r\n <!-- Remove Button -->\r\n <div class=\"remove\">\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n </div>\r\n <!-- Add Button -->\r\n <button\r\n type=\"button\"\r\n class=\"add-btn\"\r\n (click)=\"addOption(prop.options)\"\r\n >\r\n <div class=\"add-varient\">\r\n <span class=\"text-lg\">+</span>\r\n <span>Add Variants</span></div>\r\n </button>\r\n</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"design-footer\">\r\n <button class=\"btn\">Cancel</button>\r\n <button class=\"btn\" (click)=\"save()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;top:0;width:25%}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
|
|
10984
11014
|
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { colorWheel: [{
|
|
10985
11015
|
type: ViewChild,
|
|
10986
11016
|
args: ['colorWheel']
|