@rangertechnologies/ngnxt
Version:
This library was used for creating dymanic UI based on the input JSON/data
45 lines • 9.25 kB
JavaScript
// AP-29JAN25
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { PropertiesComponent } from '../properties/properties.component';
import { ElementComponent } from '../element/element.component';
import * as i0 from "@angular/core";
export class FormComponent {
// Input data for app-element
// bookletJson: any = {}; // Replace with your actual JSON object
// bookletId: string = '123'; // Replace with your actual booklet ID
bookletJSON;
bookletId;
formButtonHandler = new EventEmitter();
templateSaveHandler = new EventEmitter();
// Input data for app-properties
// api: string = 'https://example.com/api'; // Replace with your actual API endpoint
// apiMethod: string = 'GET'; // Replace with your actual API method
selectedElementType = 'button'; // Replace with the default selected element type
isTemplateSelected = false;
onTemplateModeChange(status) {
this.isTemplateSelected = status;
}
// Event handler for app-element
formButtonHandlerClick(event) {
this.formButtonHandler.emit(event);
}
saveTemplate(event) {
this.templateSaveHandler.emit(event);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FormComponent, isStandalone: true, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler", templateSaveHandler: "templateSaveHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n <!-- app-element Component -->\n <!--AP-08APR25 Passes a boolean to indicate if a template is selected -->\n <app-element \n [bookletJSON]=\"bookletJSON\" \n [bookletId]=\"bookletId\"\n (templateMode)=\"onTemplateModeChange($event)\">\n </app-element>\n <!-- app-properties Component -->\n <!-- AP-08APR25 Emits an event when the template mode -->\n <app-properties \n (formButtonHandler)=\"formButtonHandlerClick($event)\"\n (templateSaveHandler)=\"saveTemplate($event)\"\n [templateSelected]=\"isTemplateSelected\">\n </app-properties>\n \n ", styles: [".form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}app-element{width:75%}app-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}\n"], dependencies: [{ kind: "component", type: PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType", "templateSelected"], outputs: ["formButtonHandler", "templateSaveHandler"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"], outputs: ["templateMode"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
type: Component,
args: [{ selector: 'app-form-builder', standalone: true, imports: [PropertiesComponent, CommonModule, ElementComponent], template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n <!-- app-element Component -->\n <!--AP-08APR25 Passes a boolean to indicate if a template is selected -->\n <app-element \n [bookletJSON]=\"bookletJSON\" \n [bookletId]=\"bookletId\"\n (templateMode)=\"onTemplateModeChange($event)\">\n </app-element>\n <!-- app-properties Component -->\n <!-- AP-08APR25 Emits an event when the template mode -->\n <app-properties \n (formButtonHandler)=\"formButtonHandlerClick($event)\"\n (templateSaveHandler)=\"saveTemplate($event)\"\n [templateSelected]=\"isTemplateSelected\">\n </app-properties>\n \n ", styles: [".form-container{display:flex;flex-wrap:wrap;border:10px solid #86A8CD}app-element{width:75%}app-properties{border-left:10px solid #86A8CD;width:25%}:host ::ng-deep .questiondiv1{padding-left:0!important;padding-right:0!important}:host ::ng-deep .form-group.content-box{padding-bottom:0!important}\n"] }]
}], propDecorators: { bookletJSON: [{
type: Input
}], bookletId: [{
type: Input
}], formButtonHandler: [{
type: Output
}], templateSaveHandler: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvcGFnZXMvYnVpbGRlci9mb3JtL2Zvcm0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL3BhZ2VzL2J1aWxkZXIvZm9ybS9mb3JtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWM7QUFDZCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN2RSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUN6RSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQzs7QUFTaEUsTUFBTSxPQUFPLGFBQWE7SUFDeEIsNkJBQTZCO0lBQzdCLGlFQUFpRTtJQUNqRSxvRUFBb0U7SUFDekQsV0FBVyxDQUFNO0lBQ2pCLFNBQVMsQ0FBTTtJQUNkLGlCQUFpQixHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7SUFDL0MsbUJBQW1CLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztJQUU3RCxnQ0FBZ0M7SUFDaEMsb0ZBQW9GO0lBQ3BGLG9FQUFvRTtJQUNwRSxtQkFBbUIsR0FBVyxRQUFRLENBQUMsQ0FBQyxpREFBaUQ7SUFDekYsa0JBQWtCLEdBQUcsS0FBSyxDQUFDO0lBRTdCLG9CQUFvQixDQUFDLE1BQWU7UUFDbEMsSUFBSSxDQUFDLGtCQUFrQixHQUFHLE1BQU0sQ0FBQztJQUNuQyxDQUFDO0lBRUMsZ0NBQWdDO0lBQ2hDLHNCQUFzQixDQUFDLEtBQUs7UUFDMUIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNyQyxDQUFDO0lBRUQsWUFBWSxDQUFDLEtBQVU7UUFDckIsSUFBSSxDQUFDLG1CQUFtQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2QyxDQUFDO3dHQTFCVSxhQUFhOzRGQUFiLGFBQWEsNk9DYjFCLHFuQkFpQkUsb1dEUlcsbUJBQW1CLHNLQUFFLFlBQVksK0JBQUUsZ0JBQWdCOzs0RkFJbkQsYUFBYTtrQkFQekIsU0FBUzsrQkFDRSxrQkFBa0IsY0FDaEIsSUFBSSxXQUNQLENBQUUsbUJBQW1CLEVBQUUsWUFBWSxFQUFFLGdCQUFnQixDQUFDOzhCQVFwRCxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0ksaUJBQWlCO3NCQUExQixNQUFNO2dCQUNHLG1CQUFtQjtzQkFBNUIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbIi8vIEFQLTI5SkFOMjUgXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFByb3BlcnRpZXNDb21wb25lbnQgfSBmcm9tICcuLi9wcm9wZXJ0aWVzL3Byb3BlcnRpZXMuY29tcG9uZW50JztcbmltcG9ydCB7IEVsZW1lbnRDb21wb25lbnQgfSBmcm9tICcuLi9lbGVtZW50L2VsZW1lbnQuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYXBwLWZvcm0tYnVpbGRlcicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFsgUHJvcGVydGllc0NvbXBvbmVudCwgQ29tbW9uTW9kdWxlLCBFbGVtZW50Q29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL2Zvcm0uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9mb3JtLmNvbXBvbmVudC5jc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgRm9ybUNvbXBvbmVudCB7XG4gIC8vIElucHV0IGRhdGEgZm9yIGFwcC1lbGVtZW50XG4gIC8vIGJvb2tsZXRKc29uOiBhbnkgPSB7fTsgLy8gUmVwbGFjZSB3aXRoIHlvdXIgYWN0dWFsIEpTT04gb2JqZWN0XG4gIC8vIGJvb2tsZXRJZDogc3RyaW5nID0gJzEyMyc7IC8vIFJlcGxhY2Ugd2l0aCB5b3VyIGFjdHVhbCBib29rbGV0IElEXG4gICAgQElucHV0KCkgYm9va2xldEpTT046IGFueTtcbiAgICBASW5wdXQoKSBib29rbGV0SWQ6IGFueTtcbiAgICBAT3V0cHV0KCkgZm9ybUJ1dHRvbkhhbmRsZXIgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcbiAgICBAT3V0cHV0KCkgdGVtcGxhdGVTYXZlSGFuZGxlciA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIC8vIElucHV0IGRhdGEgZm9yIGFwcC1wcm9wZXJ0aWVzXG4gIC8vIGFwaTogc3RyaW5nID0gJ2h0dHBzOi8vZXhhbXBsZS5jb20vYXBpJzsgLy8gUmVwbGFjZSB3aXRoIHlvdXIgYWN0dWFsIEFQSSBlbmRwb2ludFxuICAvLyBhcGlNZXRob2Q6IHN0cmluZyA9ICdHRVQnOyAvLyBSZXBsYWNlIHdpdGggeW91ciBhY3R1YWwgQVBJIG1ldGhvZFxuICBzZWxlY3RlZEVsZW1lbnRUeXBlOiBzdHJpbmcgPSAnYnV0dG9uJzsgLy8gUmVwbGFjZSB3aXRoIHRoZSBkZWZhdWx0IHNlbGVjdGVkIGVsZW1lbnQgdHlwZVxuICBpc1RlbXBsYXRlU2VsZWN0ZWQgPSBmYWxzZTtcblxub25UZW1wbGF0ZU1vZGVDaGFuZ2Uoc3RhdHVzOiBib29sZWFuKSB7XG4gIHRoaXMuaXNUZW1wbGF0ZVNlbGVjdGVkID0gc3RhdHVzO1xufVxuXG4gIC8vIEV2ZW50IGhhbmRsZXIgZm9yIGFwcC1lbGVtZW50XG4gIGZvcm1CdXR0b25IYW5kbGVyQ2xpY2soZXZlbnQpe1xuICAgIHRoaXMuZm9ybUJ1dHRvbkhhbmRsZXIuZW1pdChldmVudCk7XG4gIH1cblxuICBzYXZlVGVtcGxhdGUoZXZlbnQ6IGFueSkgeyAgXG4gICAgdGhpcy50ZW1wbGF0ZVNhdmVIYW5kbGVyLmVtaXQoZXZlbnQpO1xuICB9ICBcbiAgXG59XG4iLCI8IS0tIEFQLTI5SkFOMjUgLS0+XG48ZGl2IGNsYXNzPVwiZm9ybS1jb250YWluZXIgXCI+XG4gICAgPCEtLSBhcHAtZWxlbWVudCBDb21wb25lbnQgLS0+XG4gICAgIDwhLS1BUC0wOEFQUjI1IFBhc3NlcyBhIGJvb2xlYW4gdG8gaW5kaWNhdGUgaWYgYSB0ZW1wbGF0ZSBpcyBzZWxlY3RlZCAtLT5cbiAgICA8YXBwLWVsZW1lbnQgXG4gICAgW2Jvb2tsZXRKU09OXT1cImJvb2tsZXRKU09OXCIgXG4gICAgW2Jvb2tsZXRJZF09XCJib29rbGV0SWRcIlxuICAgICh0ZW1wbGF0ZU1vZGUpPVwib25UZW1wbGF0ZU1vZGVDaGFuZ2UoJGV2ZW50KVwiPlxuICA8L2FwcC1lbGVtZW50PlxuICAgPCEtLSBhcHAtcHJvcGVydGllcyBDb21wb25lbnQgLS0+XG4gIDwhLS0gQVAtMDhBUFIyNSBFbWl0cyBhbiBldmVudCB3aGVuIHRoZSB0ZW1wbGF0ZSBtb2RlIC0tPlxuICA8YXBwLXByb3BlcnRpZXMgXG4gIChmb3JtQnV0dG9uSGFuZGxlcik9XCJmb3JtQnV0dG9uSGFuZGxlckNsaWNrKCRldmVudClcIlxuICAodGVtcGxhdGVTYXZlSGFuZGxlcik9XCJzYXZlVGVtcGxhdGUoJGV2ZW50KVwiXG4gIFt0ZW1wbGF0ZVNlbGVjdGVkXT1cImlzVGVtcGxhdGVTZWxlY3RlZFwiPlxuIDwvYXBwLXByb3BlcnRpZXM+XG4gIFxuICAiXX0=