@rangertechnologies/ngnxt 2.1.84 → 2.1.86
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 +6 -6
- package/esm2022/lib/pages/builder/properties/properties.component.mjs +11 -5
- package/esm2022/lib/services/data.service.mjs +3 -3
- package/esm2022/lib/services/form-builder.service.mjs +9 -21
- package/fesm2022/rangertechnologies-ngnxt.mjs +57 -35
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/lib/components/pick-location/pick-location.component.d.ts +5 -3
- package/lib/pages/builder/properties/properties.component.d.ts +3 -1
- package/lib/services/form-builder.service.d.ts +2 -2
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.86.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: [{
|
|
@@ -10224,6 +10252,7 @@ class FormBuilderService {
|
|
|
10224
10252
|
// book: { bookQuestionsMap: { unique_id: { subQuestions: any[]; }; }; };
|
|
10225
10253
|
constructor() {
|
|
10226
10254
|
// Load saved elements from localStorage
|
|
10255
|
+
this.formElements = [];
|
|
10227
10256
|
const savedFormElements = localStorage.getItem('formElements');
|
|
10228
10257
|
if (savedFormElements) {
|
|
10229
10258
|
this.formElements = JSON.parse(savedFormElements);
|
|
@@ -10240,9 +10269,10 @@ class FormBuilderService {
|
|
|
10240
10269
|
this.elementComponent = component;
|
|
10241
10270
|
}
|
|
10242
10271
|
// Add a new element to the form
|
|
10243
|
-
addElement(element
|
|
10272
|
+
addElement(element) {
|
|
10273
|
+
debugger;
|
|
10244
10274
|
// const savedFormElements = localStorage.getItem('formElements');
|
|
10245
|
-
console.log("
|
|
10275
|
+
console.log("length", this.formElements.length);
|
|
10246
10276
|
if (this.formElements.length == 0) {
|
|
10247
10277
|
console.log("savedFormElements", this.formElements);
|
|
10248
10278
|
// this.formElements = JSON.parse(savedFormElements);
|
|
@@ -10275,7 +10305,7 @@ class FormBuilderService {
|
|
|
10275
10305
|
}
|
|
10276
10306
|
this.formElements.push(element);
|
|
10277
10307
|
localStorage.setItem('formElements', JSON.stringify(this.formElements));
|
|
10278
|
-
this.formElementsSubject.next([...this.formElements]);
|
|
10308
|
+
// this.formElementsSubject.next([...this.formElements]);
|
|
10279
10309
|
}
|
|
10280
10310
|
updateElement(index, updates) {
|
|
10281
10311
|
const elements = [...this.getElements()];
|
|
@@ -10332,26 +10362,12 @@ class FormBuilderService {
|
|
|
10332
10362
|
this.book.bookQuestionsMap[this.unique_id]['sqOptions'] = tempElement;
|
|
10333
10363
|
return this.book;
|
|
10334
10364
|
}
|
|
10335
|
-
//
|
|
10336
|
-
// findElementById(id: string): FormElement | null {
|
|
10337
|
-
// const findRecursive = (elements: FormElement[]): FormElement | null => {
|
|
10338
|
-
// for (const el of elements) {
|
|
10339
|
-
// if (el.id === id) return el;
|
|
10340
|
-
// if (el.subQuestions) {
|
|
10341
|
-
// const found = findRecursive(el.subQuestions);
|
|
10342
|
-
// if (found) return found;
|
|
10343
|
-
// }
|
|
10344
|
-
// }
|
|
10345
|
-
// return null;
|
|
10346
|
-
// };
|
|
10347
|
-
// return findRecursive(this.formElements);
|
|
10348
|
-
// }
|
|
10349
|
-
// Remove an element by UID
|
|
10365
|
+
// Remove an element by ID
|
|
10350
10366
|
// Save elements to localStorage and update the subject
|
|
10351
|
-
removeElementComponent(
|
|
10367
|
+
removeElementComponent(id) {
|
|
10352
10368
|
this.tempElem = [];
|
|
10353
10369
|
this.formElements.forEach((element) => {
|
|
10354
|
-
if (element.
|
|
10370
|
+
if (element.id !== id) {
|
|
10355
10371
|
this.tempElem.push(element);
|
|
10356
10372
|
}
|
|
10357
10373
|
});
|
|
@@ -10388,6 +10404,7 @@ class ElementComponent {
|
|
|
10388
10404
|
});
|
|
10389
10405
|
console.log("bookletJSON==" + this.bookletJSON);
|
|
10390
10406
|
if (this.bookletJSON) {
|
|
10407
|
+
// AP-23JAN25 - empty string to clear the local storage
|
|
10391
10408
|
localStorage.setItem('status', ("edit"));
|
|
10392
10409
|
localStorage.setItem('unique_id', (this.bookletId));
|
|
10393
10410
|
this.formElements = [];
|
|
@@ -10450,8 +10467,7 @@ class ElementComponent {
|
|
|
10450
10467
|
questionBookSubTitle: '',
|
|
10451
10468
|
style: '',
|
|
10452
10469
|
options: type === 'CheckBox' || type === 'Radio' || type === 'Dropdown' ? [
|
|
10453
|
-
{ label: 'Option 1', value: '', type: 'text', key: 'option1' }
|
|
10454
|
-
{ label: 'Option 2', value: '', type: 'text', key: 'option2' }
|
|
10470
|
+
{ label: 'Option 1', value: '', type: 'text', key: 'option1' }
|
|
10455
10471
|
] : null,
|
|
10456
10472
|
};
|
|
10457
10473
|
this.formBuilderService.addElement(newElement);
|
|
@@ -10466,7 +10482,7 @@ class ElementComponent {
|
|
|
10466
10482
|
// Remove an element by index
|
|
10467
10483
|
removeElement(field, index) {
|
|
10468
10484
|
console.log('remove', index);
|
|
10469
|
-
this.formBuilderService.removeElementComponent(field.
|
|
10485
|
+
this.formBuilderService.removeElementComponent(field.id);
|
|
10470
10486
|
this.formElements = this.formBuilderService.getElements();
|
|
10471
10487
|
}
|
|
10472
10488
|
getFontStyles(field) {
|
|
@@ -10498,11 +10514,11 @@ class ElementComponent {
|
|
|
10498
10514
|
return styles;
|
|
10499
10515
|
}
|
|
10500
10516
|
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"] }] });
|
|
10517
|
+
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 *ngIf=\"field.type === 'CheckBox'\" 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\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n </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 <div class=\"checkbox-container\">\r\n <label *ngFor=\"let option of field.options\" class=\"option-label\">\r\n <input type=\"checkbox\" [checked]=\"option.selected\" />\r\n <span>{{ option.label }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Dropdown -->\r\n<div *ngIf=\"field.type === 'Dropdown'\" 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\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n </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 <select class=\"dropdown-options\" [(ngModel)]=\"field.selectedOption\">\r\n <option *ngFor=\"let option of field.options\" [value]=\"option\">{{ option }}</option>\r\n </select>\r\n </div>\r\n </div>\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 <!-- 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\r\n src=\"../assets/icons/Trash.svg\"\r\n alt=\"Delete\"\r\n (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%;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}@media (max-width: 1200px){.form-builder{width:85%}}@media (max-width: 768px){.form-builder{width:95%;gap:5px}}@media (max-width: 480px){.form-builder{flex-direction:column;gap:8px}}.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,.image-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}.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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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
10518
|
}
|
|
10503
10519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ElementComponent, decorators: [{
|
|
10504
10520
|
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"] }]
|
|
10521
|
+
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 *ngIf=\"field.type === 'CheckBox'\" 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\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n </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 <div class=\"checkbox-container\">\r\n <label *ngFor=\"let option of field.options\" class=\"option-label\">\r\n <input type=\"checkbox\" [checked]=\"option.selected\" />\r\n <span>{{ option.label }}</span>\r\n </label>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n <!-- Dropdown -->\r\n<div *ngIf=\"field.type === 'Dropdown'\" 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\">\r\n <div *ngFor=\"let _ of [1,2,3,4,5,6,7,8]\"></div>\r\n </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 <select class=\"dropdown-options\" [(ngModel)]=\"field.selectedOption\">\r\n <option *ngFor=\"let option of field.options\" [value]=\"option\">{{ option }}</option>\r\n </select>\r\n </div>\r\n </div>\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 <!-- 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\r\n src=\"../assets/icons/Trash.svg\"\r\n alt=\"Delete\"\r\n (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%;max-width:1200px;min-width:300px;margin:auto;box-shadow:0 2px 4px #888;border-top:none;border-radius:8px;background-color:#fff}@media (max-width: 1200px){.form-builder{width:85%}}@media (max-width: 768px){.form-builder{width:95%;gap:5px}}@media (max-width: 480px){.form-builder{flex-direction:column;gap:8px}}.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,.image-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}.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
10522
|
}], ctorParameters: () => [{ type: FormBuilderService }], propDecorators: { elementButtonClicked: [{
|
|
10507
10523
|
type: Output
|
|
10508
10524
|
}], formContainer: [{
|
|
@@ -10524,6 +10540,8 @@ class PropertiesComponent {
|
|
|
10524
10540
|
selectedElementIndex = -1;
|
|
10525
10541
|
// @Input() selectedElement: any;
|
|
10526
10542
|
selectedElementType = '';
|
|
10543
|
+
api = '';
|
|
10544
|
+
apiMethod = 'POST';
|
|
10527
10545
|
selectedAlign = 'align-left'; // Add this property
|
|
10528
10546
|
selectedStyles = []; // Using array since multiple styles can be selected
|
|
10529
10547
|
errorMessage = '';
|
|
@@ -10968,24 +10986,28 @@ class PropertiesComponent {
|
|
|
10968
10986
|
console.log('Question Book:', this.formBuilderService.downloadElement());
|
|
10969
10987
|
}
|
|
10970
10988
|
save() {
|
|
10971
|
-
const apiURL = 'https://dev-api.rangerfusion.com/nxt/';
|
|
10972
|
-
this.http.
|
|
10989
|
+
// const apiURL = 'https://dev-api.rangerfusion.com/nxt/';
|
|
10990
|
+
this.http.request(this.apiMethod, this.api, { body: this.formBuilderService.downloadElement }).subscribe((response) => {
|
|
10973
10991
|
console.log('Response:', response);
|
|
10974
10992
|
}, (error) => {
|
|
10975
10993
|
console.error('Error:', error);
|
|
10976
10994
|
});
|
|
10977
10995
|
}
|
|
10978
10996
|
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"] }] });
|
|
10997
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType", api: "api", apiMethod: "apiMethod" }, 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 <div class=\"properties\">\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 type=\"checkbox\"/>\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</div>\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:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
10980
10998
|
}
|
|
10981
10999
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
|
|
10982
11000
|
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"] }]
|
|
11001
|
+
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 <div class=\"properties\">\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 type=\"checkbox\"/>\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</div>\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:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
|
|
10984
11002
|
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: FormBuilderService }], propDecorators: { colorWheel: [{
|
|
10985
11003
|
type: ViewChild,
|
|
10986
11004
|
args: ['colorWheel']
|
|
10987
11005
|
}], selectedElementType: [{
|
|
10988
11006
|
type: Input
|
|
11007
|
+
}], api: [{
|
|
11008
|
+
type: Input
|
|
11009
|
+
}], apiMethod: [{
|
|
11010
|
+
type: Input
|
|
10989
11011
|
}] } });
|
|
10990
11012
|
|
|
10991
11013
|
// AP 22JAN25
|