@rangertechnologies/ngnxt/esm2022/lib/pages/builder/form/form.component.mjs

This library was used for creating dymanic UI based on the input JSON/data

// AP-29JAN25 
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../element/element.component";
import * as i2 from "../properties/properties.component";
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();
    // 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
    // Event handler for app-element
    formButtonHandlerClick(event) {
        this.formButtonHandler.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, selector: "app-form-builder", inputs: { bookletJSON: "bookletJSON", bookletId: "bookletId" }, outputs: { formButtonHandler: "formButtonHandler" }, ngImport: i0, template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n    <app-element [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [".form-container{display:flex;flex-wrap:wrap;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}:host ::ng-deep .form-group{margin-bottom:0!important}\n"], dependencies: [{ kind: "component", type: i1.ElementComponent, selector: "app-element", inputs: ["bookletJSON", "bookletId"] }, { kind: "component", type: i2.PropertiesComponent, selector: "app-properties", inputs: ["selectedElementType"], outputs: ["formButtonHandler"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-form-builder', template: "<!-- AP-29JAN25 -->\n<div class=\"form-container \">\n    <!-- app-element Component -->\n    <app-element [bookletJSON]=\"bookletJSON\" [bookletId]=\"bookletId\"></app-element>\n  \n    <!-- app-properties Component -->\n    <app-properties (formButtonHandler)=\"formButtonHandlerClick($event)\"></app-properties>\n  </div>\n  ", styles: [".form-container{display:flex;flex-wrap:wrap;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}:host ::ng-deep .form-group{margin-bottom:0!important}\n"] }]
        }], propDecorators: { bookletJSON: [{
                type: Input
            }], bookletId: [{
                type: Input
            }], formButtonHandler: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvcGFnZXMvYnVpbGRlci9mb3JtL2Zvcm0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL3BhZ2VzL2J1aWxkZXIvZm9ybS9mb3JtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWM7QUFDZCxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBT3ZFLE1BQU0sT0FBTyxhQUFhO0lBQ3hCLDZCQUE2QjtJQUM3QixpRUFBaUU7SUFDakUsb0VBQW9FO0lBQ3pELFdBQVcsQ0FBTTtJQUNqQixTQUFTLENBQU07SUFDZCxpQkFBaUIsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBRTNELGdDQUFnQztJQUNoQyxvRkFBb0Y7SUFDcEYsb0VBQW9FO0lBQ3BFLG1CQUFtQixHQUFXLFFBQVEsQ0FBQyxDQUFDLGlEQUFpRDtJQUV6RixnQ0FBZ0M7SUFDaEMsc0JBQXNCLENBQUMsS0FBSztRQUMxQixJQUFJLENBQUMsaUJBQWlCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3JDLENBQUM7d0dBaEJVLGFBQWE7NEZBQWIsYUFBYSw2S0NSMUIsMFVBUUU7OzRGREFXLGFBQWE7a0JBTHpCLFNBQVM7K0JBQ0Usa0JBQWtCOzhCQVFqQixXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBQ0ksaUJBQWlCO3NCQUExQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiLy8gQVAtMjlKQU4yNSBcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC1mb3JtLWJ1aWxkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vZm9ybS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2Zvcm0uY29tcG9uZW50LmNzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBGb3JtQ29tcG9uZW50IHtcbiAgLy8gSW5wdXQgZGF0YSBmb3IgYXBwLWVsZW1lbnRcbiAgLy8gYm9va2xldEpzb246IGFueSA9IHt9OyAvLyBSZXBsYWNlIHdpdGggeW91ciBhY3R1YWwgSlNPTiBvYmplY3RcbiAgLy8gYm9va2xldElkOiBzdHJpbmcgPSAnMTIzJzsgLy8gUmVwbGFjZSB3aXRoIHlvdXIgYWN0dWFsIGJvb2tsZXQgSURcbiAgICBASW5wdXQoKSBib29rbGV0SlNPTjogYW55O1xuICAgIEBJbnB1dCgpIGJvb2tsZXRJZDogYW55O1xuICAgIEBPdXRwdXQoKSBmb3JtQnV0dG9uSGFuZGxlciA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG4gIC8vIElucHV0IGRhdGEgZm9yIGFwcC1wcm9wZXJ0aWVzXG4gIC8vIGFwaTogc3RyaW5nID0gJ2h0dHBzOi8vZXhhbXBsZS5jb20vYXBpJzsgLy8gUmVwbGFjZSB3aXRoIHlvdXIgYWN0dWFsIEFQSSBlbmRwb2ludFxuICAvLyBhcGlNZXRob2Q6IHN0cmluZyA9ICdHRVQnOyAvLyBSZXBsYWNlIHdpdGggeW91ciBhY3R1YWwgQVBJIG1ldGhvZFxuICBzZWxlY3RlZEVsZW1lbnRUeXBlOiBzdHJpbmcgPSAnYnV0dG9uJzsgLy8gUmVwbGFjZSB3aXRoIHRoZSBkZWZhdWx0IHNlbGVjdGVkIGVsZW1lbnQgdHlwZVxuXG4gIC8vIEV2ZW50IGhhbmRsZXIgZm9yIGFwcC1lbGVtZW50XG4gIGZvcm1CdXR0b25IYW5kbGVyQ2xpY2soZXZlbnQpe1xuICAgIHRoaXMuZm9ybUJ1dHRvbkhhbmRsZXIuZW1pdChldmVudCk7XG4gIH1cbn1cbiIsIjwhLS0gQVAtMjlKQU4yNSAtLT5cbjxkaXYgY2xhc3M9XCJmb3JtLWNvbnRhaW5lciBcIj5cbiAgICA8IS0tIGFwcC1lbGVtZW50IENvbXBvbmVudCAtLT5cbiAgICA8YXBwLWVsZW1lbnQgW2Jvb2tsZXRKU09OXT1cImJvb2tsZXRKU09OXCIgW2Jvb2tsZXRJZF09XCJib29rbGV0SWRcIj48L2FwcC1lbGVtZW50PlxuICBcbiAgICA8IS0tIGFwcC1wcm9wZXJ0aWVzIENvbXBvbmVudCAtLT5cbiAgICA8YXBwLXByb3BlcnRpZXMgKGZvcm1CdXR0b25IYW5kbGVyKT1cImZvcm1CdXR0b25IYW5kbGVyQ2xpY2soJGV2ZW50KVwiPjwvYXBwLXByb3BlcnRpZXM+XG4gIDwvZGl2PlxuICAiXX0=