@forge-form/angular 1.0.0

package/fesm2022/forge-form-angular.mjs

@@ -0,0 +1,853 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Inject, Injectable, inject, input, DestroyRef, signal, computed, ChangeDetectionStrategy, Component, effect, Input, output, Directive } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, FormControl, FormGroup, Validators } from '@angular/forms';
+import { NgComponentOutlet } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { distinctUntilChanged, debounceTime } from 'rxjs';
+
+const RENDERERS = new InjectionToken('RENDERERS');
+class RendererRegistry {
+    map = new Map();
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    constructor(renderers = []) {
+        renderers.flat().forEach((r) => {
+            this.map.set(r.type, r.component);
+        });
+    }
+    get(type) {
+        const cmp = this.map.get(type);
+        if (!cmp) {
+            throw new Error(`No renderer for type: ${type}`);
+        }
+        return cmp;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RendererRegistry, deps: [{ token: RENDERERS }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RendererRegistry });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RendererRegistry, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [RENDERERS]
+                }] }] });
+
+const FORM_OPTIONS = new InjectionToken('FORM_OPTIONS');
+
+const ORIENTATION_OPTIONS = {
+    row: 'row',
+    column: 'column',
+};
+const THEMES = {
+    none: 'none',
+    default: 'default',
+};
+
+const debouncedValueChanges = (valueChanges, time = 0, destroyRef) => valueChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(destroyRef), debounceTime(time));
+
+const UPDATE_ON = {
+    change: 'change',
+    blur: 'blur',
+    submit: 'submit',
+};
+
+const VALIDATOR_TYPES = {
+    required: 'required',
+    minlength: 'minlength',
+    maxlength: 'maxlength',
+    min: 'min',
+    max: 'max',
+    custom: 'custom',
+};
+
+const ERROR_MESSAGES = new InjectionToken('ERROR_MESSAGES');
+const DEFAULT_ERROR_FALLBACK = new InjectionToken('DEFAULT_ERROR_FALLBACK');
+const DEFAULT_ERROR_MESSAGES = [
+    {
+        type: VALIDATOR_TYPES.required,
+        message: () => 'This field is required',
+    },
+    {
+        type: VALIDATOR_TYPES.minlength,
+        message: (err) => `Minimum length is ${err['requiredLength']}`,
+    },
+    {
+        type: VALIDATOR_TYPES.maxlength,
+        message: (err) => `Maximum length is ${err['requiredLength']}`,
+    },
+    {
+        type: VALIDATOR_TYPES.min,
+        message: (err) => `Minimum value is ${err['min']}`,
+    },
+    {
+        type: VALIDATOR_TYPES.max,
+        message: (err) => `Maximum value is ${err['max']}`,
+    },
+];
+class ErrorMessageRegistry {
+    map = new Map();
+    // eslint-disable-next-line @angular-eslint/prefer-inject
+    constructor(defs = []) {
+        defs.flat().forEach((def) => {
+            this.map.set(def.type, def.message);
+        });
+    }
+    get(type) {
+        return this.map.get(type) ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorMessageRegistry, deps: [{ token: ERROR_MESSAGES }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorMessageRegistry });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorMessageRegistry, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ERROR_MESSAGES]
+                }] }] });
+
+class ErrorMessageService {
+    registry = inject(ErrorMessageRegistry);
+    defaultFallback = inject(DEFAULT_ERROR_FALLBACK);
+    getErrors(control, validators) {
+        if (!control.errors)
+            return [];
+        return Object.entries(control.errors).map(([errorKey, errorValue]) => {
+            const validatorSchema = this.getValidatorSchema(errorKey, validators);
+            const content = validatorSchema?.errorMessage ??
+                this.registry.get(errorKey);
+            if (!content) {
+                return { type: 'text', message: this.defaultFallback };
+            }
+            return this.resolveContent(content, errorValue);
+        });
+    }
+    getValidatorSchema(errorKey, validators) {
+        return validators.find((validator) => validator.type !== VALIDATOR_TYPES.custom
+            ? validator.type === errorKey
+            : validator.key === errorKey);
+    }
+    resolveContent(content, errorValue) {
+        if (typeof content === 'string') {
+            return { type: 'text', message: content };
+        }
+        if (typeof content === 'function') {
+            return { type: 'text', message: content(errorValue) };
+        }
+        return {
+            type: 'component',
+            component: content.component,
+            inputs: content.inputs?.(errorValue),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorMessageService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorMessageService, decorators: [{
+            type: Injectable
+        }] });
+
+class ErrorRendererComponent {
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    controlSchema = input.required(...(ngDevMode ? [{ debugName: "controlSchema" }] : []));
+    destroyRef = inject(DestroyRef);
+    errorMessageService = inject(ErrorMessageService);
+    controlErrors = signal(null, ...(ngDevMode ? [{ debugName: "controlErrors" }] : []));
+    resolvedErrors = computed(() => {
+        const errors = this.controlErrors();
+        return !!errors && !!this.controlSchema().validators
+            ? this.errorMessageService.getErrors(this.control(), this.controlSchema().validators)
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedErrors" }] : []));
+    ngOnInit() {
+        this.control()
+            .statusChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.controlErrors.set(this.control().errors));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ErrorRendererComponent, isStandalone: true, selector: "forge-form-error-renderer", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, controlSchema: { classPropertyName: "controlSchema", publicName: "controlSchema", isSignal: true, isRequired: true, transformFunction: null } }, providers: [ErrorMessageService, ErrorMessageRegistry], ngImport: i0, template: "@for (resolvedError of resolvedErrors(); track resolvedError) {\r\n  @if (resolvedError.type === 'text') {\r\n    <span class=\"forge-form-error\" data-test=\"error-text\">\r\n      {{ resolvedError.message }}\r\n    </span>\r\n  }\r\n\r\n  @if (resolvedError.type === 'component') {\r\n    <ng-container\r\n      *ngComponentOutlet=\"\r\n        resolvedError.component;\r\n        inputs: {\r\n          ...resolvedError.inputs,\r\n        }\r\n      \" />\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ErrorRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'forge-form-error-renderer', imports: [ReactiveFormsModule, NgComponentOutlet], providers: [ErrorMessageService, ErrorMessageRegistry], changeDetection: ChangeDetectionStrategy.OnPush, template: "@for (resolvedError of resolvedErrors(); track resolvedError) {\r\n  @if (resolvedError.type === 'text') {\r\n    <span class=\"forge-form-error\" data-test=\"error-text\">\r\n      {{ resolvedError.message }}\r\n    </span>\r\n  }\r\n\r\n  @if (resolvedError.type === 'component') {\r\n    <ng-container\r\n      *ngComponentOutlet=\"\r\n        resolvedError.component;\r\n        inputs: {\r\n          ...resolvedError.inputs,\r\n        }\r\n      \" />\r\n  }\r\n}\r\n" }]
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], controlSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlSchema", required: true }] }] } });
+
+class HintMessageService {
+    getHint(hint) {
+        if (!hint)
+            return undefined;
+        return hint instanceof Object && 'component' in hint
+            ? {
+                type: 'component',
+                component: hint.component,
+                inputs: hint.inputs,
+            }
+            : { type: 'text', message: hint };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HintMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HintMessageService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HintMessageService, decorators: [{
+            type: Injectable
+        }] });
+
+class HintRendererComponent {
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    controlSchema = input.required(...(ngDevMode ? [{ debugName: "controlSchema" }] : []));
+    destroyRef = inject(DestroyRef);
+    hintMessageService = inject(HintMessageService);
+    controlErrors = signal(null, ...(ngDevMode ? [{ debugName: "controlErrors" }] : []));
+    controlValue = signal(null, ...(ngDevMode ? [{ debugName: "controlValue" }] : []));
+    resolvedHint = computed(() => {
+        const errors = this.controlErrors();
+        return !errors && !!this.controlSchema().hint
+            ? this.hintMessageService.getHint(this.controlSchema().hint)
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "resolvedHint" }] : []));
+    mergedInputs = computed(() => {
+        const hint = this.resolvedHint();
+        if (!hint || hint.type !== 'component') {
+            return {};
+        }
+        return {
+            control: this.control(),
+            controlValue: this.controlValue(),
+            controlErrors: this.controlErrors(),
+            controlSchema: this.controlSchema(),
+            ...hint.inputs,
+        };
+    }, ...(ngDevMode ? [{ debugName: "mergedInputs" }] : []));
+    ngOnInit() {
+        this.controlValue.set(this.control().value);
+        this.control()
+            .valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((value) => {
+            this.controlValue.set(value);
+        });
+        this.control()
+            .statusChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.controlErrors.set(this.control().errors));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HintRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: HintRendererComponent, isStandalone: true, selector: "forge-form-hint-renderer", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, controlSchema: { classPropertyName: "controlSchema", publicName: "controlSchema", isSignal: true, isRequired: true, transformFunction: null } }, providers: [HintMessageService], ngImport: i0, template: "@if (resolvedHint(); as hint) {\r\n  @if (hint.type === 'text') {\r\n    <span class=\"forge-form-hint\" data-test=\"hint-text\">\r\n      {{ hint.message }}\r\n    </span>\r\n  }\r\n\r\n  @if (hint.type === 'component') {\r\n    <ng-container *ngComponentOutlet=\"hint.component; inputs: mergedInputs()\" />\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: HintRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'forge-form-hint-renderer', imports: [ReactiveFormsModule, NgComponentOutlet], providers: [HintMessageService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (resolvedHint(); as hint) {\r\n  @if (hint.type === 'text') {\r\n    <span class=\"forge-form-hint\" data-test=\"hint-text\">\r\n      {{ hint.message }}\r\n    </span>\r\n  }\r\n\r\n  @if (hint.type === 'component') {\r\n    <ng-container *ngComponentOutlet=\"hint.component; inputs: mergedInputs()\" />\r\n  }\r\n}\r\n" }]
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], controlSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlSchema", required: true }] }] } });
+
+class FormBuilderService {
+    buildForm(schema) {
+        const controls = {};
+        const collectControls = (node) => {
+            for (const item of node.controls) {
+                if (this.isGroupFieldSchema(item)) {
+                    collectControls(item);
+                }
+                else {
+                    controls[item.controlName] = new FormControl(item.initialValue ?? null, {
+                        updateOn: item.updateOn ?? schema.updateOn,
+                        validators: this.mapSchemaValidators(item.validators),
+                    });
+                }
+            }
+        };
+        collectControls(schema);
+        return new FormGroup(controls, { updateOn: schema.updateOn });
+    }
+    mapSchemaValidators(validators) {
+        if (!validators?.length) {
+            return null;
+        }
+        return validators.map((validator) => {
+            switch (validator.type) {
+                case VALIDATOR_TYPES.required:
+                    return Validators.required;
+                case VALIDATOR_TYPES.minlength:
+                    return Validators.minLength(validator.value);
+                case VALIDATOR_TYPES.maxlength:
+                    return Validators.maxLength(validator.value);
+                case VALIDATOR_TYPES.min:
+                    return Validators.min(validator.value);
+                case VALIDATOR_TYPES.max:
+                    return Validators.max(validator.value);
+                case VALIDATOR_TYPES.custom:
+                    return validator.fn;
+                default:
+                    return () => null;
+            }
+        });
+    }
+    isGroupFieldSchema(obj) {
+        return 'controls' in obj;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormBuilderService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormBuilderService, decorators: [{
+            type: Injectable
+        }] });
+
+const VISIBILITY_BEHAVIORS = {
+    hide: 'hide',
+    disable: 'disable',
+};
+
+class FormService {
+    destroyRef = inject(DestroyRef);
+    formBuilder = inject(FormBuilderService);
+    form = signal(null, ...(ngDevMode ? [{ debugName: "form" }] : []));
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabledByVisibility = new Set();
+    valueChangesSubscription;
+    init(formSchema) {
+        if (!formSchema) {
+            return;
+        }
+        this.valueChangesSubscription?.unsubscribe();
+        const form = this.formBuilder.buildForm(formSchema);
+        this.form.set(form);
+        this.valueChangesSubscription = this.form()
+            .valueChanges.pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.value.set(this.form().value));
+    }
+    applyVisibility(controlSchema, visible, clearOnHide) {
+        const visibilitySchema = controlSchema.visibility;
+        if (!visibilitySchema) {
+            return;
+        }
+        if (visibilitySchema.behavior === VISIBILITY_BEHAVIORS.disable) {
+            if (visible) {
+                this.disableControlByVisibility(controlSchema.controlName, clearOnHide);
+            }
+            else {
+                this.enableControlByVisibility(controlSchema.controlName);
+            }
+        }
+    }
+    getControl(controlName) {
+        if (!this.form()) {
+            console.error("Couldn't get control. Form is not initialized!");
+            return null;
+        }
+        const control = this.form().get(controlName);
+        if (!control) {
+            console.error(`Couldn't get control. Control with name "${controlName}" not found!`);
+            return null;
+        }
+        return control;
+    }
+    disableControlByVisibility(controlName, clearOnHide) {
+        const control = this.getControl(controlName);
+        if (!control)
+            return;
+        if (clearOnHide && !this.disabledByVisibility.has(controlName)) {
+            control.reset(null, { emitEvent: false });
+        }
+        if (control.enabled) {
+            control.disable({ emitEvent: false });
+            this.disabledByVisibility.add(controlName);
+        }
+    }
+    enableControlByVisibility(controlName) {
+        const control = this.getControl(controlName);
+        if (!control)
+            return;
+        if (this.disabledByVisibility.has(controlName)) {
+            control.enable({ emitEvent: false });
+            this.disabledByVisibility.delete(controlName);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormService, decorators: [{
+            type: Injectable
+        }] });
+
+class FormFieldComponent {
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    controlSchema = input.required(...(ngDevMode ? [{ debugName: "controlSchema" }] : []));
+    VALUE_CHANGE_DELAY = 300;
+    registry = inject(RendererRegistry);
+    formOptions = inject(FORM_OPTIONS, { optional: true });
+    destroyRef = inject(DestroyRef);
+    formService = inject((FormService));
+    wasVisible = true;
+    formSignal = this.formService.form;
+    componentType = computed(() => this.registry.get(this.controlSchema().type), ...(ngDevMode ? [{ debugName: "componentType" }] : []));
+    labelOrientation = computed(() => this.controlSchema().options?.labelOrientation ??
+        this.formOptions?.labelOrientation ??
+        ORIENTATION_OPTIONS.column, ...(ngDevMode ? [{ debugName: "labelOrientation" }] : []));
+    valueChanges = signal(null, ...(ngDevMode ? [{ debugName: "valueChanges" }] : []));
+    shouldApplyDelay = computed(() => this.controlSchema().updateOn === UPDATE_ON.change &&
+        this.controlSchema().type !== 'checkbox', ...(ngDevMode ? [{ debugName: "shouldApplyDelay" }] : []));
+    visibilityResolved = computed(() => {
+        const visibilitySchema = this.controlSchema().visibility;
+        const formValue = this.formService.value();
+        const visible = visibilitySchema?.fn({
+            value: formValue,
+            form: this.formSignal(),
+            control: this.control(),
+        });
+        return visibilitySchema ? visible : true;
+    }, ...(ngDevMode ? [{ debugName: "visibilityResolved" }] : []));
+    showControl = computed(() => {
+        const visibilitySchema = this.controlSchema().visibility;
+        return ((!this.visibilityResolved() &&
+            visibilitySchema?.behavior === VISIBILITY_BEHAVIORS.hide) ||
+            !visibilitySchema ||
+            visibilitySchema?.behavior !== VISIBILITY_BEHAVIORS.hide);
+    }, ...(ngDevMode ? [{ debugName: "showControl" }] : []));
+    constructor() {
+        effect(() => {
+            const visibilitySchema = this.controlSchema().visibility;
+            const visible = !!this.visibilityResolved();
+            const becameHidden = this.wasVisible && !visible;
+            if (!visibilitySchema) {
+                return;
+            }
+            this.formService.applyVisibility(this.controlSchema(), visible, becameHidden && !!visibilitySchema.clearOnHide);
+            this.wasVisible = !!visible;
+        });
+    }
+    ngOnInit() {
+        debouncedValueChanges(this.control().valueChanges, this.shouldApplyDelay() ? this.VALUE_CHANGE_DELAY : 0, this.destroyRef).subscribe((value) => this.valueChanges.set(value));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FormFieldComponent, isStandalone: true, selector: "forge-form-field", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, controlSchema: { classPropertyName: "controlSchema", publicName: "controlSchema", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (showControl()) {\r\n  <div\r\n    data-test=\"forge-form-field-container\"\r\n    [class]=\"\r\n      'forge-form-field-container forge-form-field-container--' +\r\n      labelOrientation()\r\n    \"\r\n    [style.width]=\"controlSchema().options?.width || 'auto'\">\r\n    @if (controlSchema().label) {\r\n      <span class=\"forge-form-field-label\" data-test=\"forge-form-field-label\">\r\n        {{ controlSchema().label }}\r\n      </span>\r\n    }\r\n\r\n    <ng-container\r\n      *ngComponentOutlet=\"\r\n        componentType();\r\n        inputs: {\r\n          control: control(),\r\n          controlSchema: controlSchema(),\r\n        }\r\n      \" />\r\n\r\n    <forge-form-hint-renderer\r\n      [control]=\"control()\"\r\n      [controlSchema]=\"controlSchema()\" />\r\n\r\n    <forge-form-error-renderer\r\n      [control]=\"control()\"\r\n      [controlSchema]=\"controlSchema()\" />\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: ErrorRendererComponent, selector: "forge-form-error-renderer", inputs: ["control", "controlSchema"] }, { kind: "component", type: HintRendererComponent, selector: "forge-form-hint-renderer", inputs: ["control", "controlSchema"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'forge-form-field', imports: [
+                        ReactiveFormsModule,
+                        NgComponentOutlet,
+                        ErrorRendererComponent,
+                        HintRendererComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showControl()) {\r\n  <div\r\n    data-test=\"forge-form-field-container\"\r\n    [class]=\"\r\n      'forge-form-field-container forge-form-field-container--' +\r\n      labelOrientation()\r\n    \"\r\n    [style.width]=\"controlSchema().options?.width || 'auto'\">\r\n    @if (controlSchema().label) {\r\n      <span class=\"forge-form-field-label\" data-test=\"forge-form-field-label\">\r\n        {{ controlSchema().label }}\r\n      </span>\r\n    }\r\n\r\n    <ng-container\r\n      *ngComponentOutlet=\"\r\n        componentType();\r\n        inputs: {\r\n          control: control(),\r\n          controlSchema: controlSchema(),\r\n        }\r\n      \" />\r\n\r\n    <forge-form-hint-renderer\r\n      [control]=\"control()\"\r\n      [controlSchema]=\"controlSchema()\" />\r\n\r\n    <forge-form-error-renderer\r\n      [control]=\"control()\"\r\n      [controlSchema]=\"controlSchema()\" />\r\n  </div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], controlSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlSchema", required: true }] }] } });
+
+class TextRendererComponent {
+    control;
+    controlSchema;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TextRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: TextRendererComponent, isStandalone: true, selector: "forge-form-text-renderer", inputs: { control: "control", controlSchema: "controlSchema" }, ngImport: i0, template: `
+    <input
+      class="forge-form-input"
+      data-test="text-input"
+      [attr.id]="controlSchema.controlName"
+      [formControl]="control"
+      [placeholder]="controlSchema.placeholder || controlSchema.label" />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TextRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'forge-form-text-renderer',
+                    template: `
+    <input
+      class="forge-form-input"
+      data-test="text-input"
+      [attr.id]="controlSchema.controlName"
+      [formControl]="control"
+      [placeholder]="controlSchema.placeholder || controlSchema.label" />
+  `,
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlSchema: [{
+                type: Input
+            }] } });
+
+class NumberRendererComponent {
+    control;
+    controlSchema;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NumberRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: NumberRendererComponent, isStandalone: true, selector: "forge-form-number-renderer", inputs: { control: "control", controlSchema: "controlSchema" }, ngImport: i0, template: `
+    <input
+      class="forge-form-input"
+      data-test="number-input"
+      type="number"
+      [attr.id]="controlSchema.controlName"
+      [formControl]="control"
+      [attr.min]="controlSchema.min"
+      [attr.max]="controlSchema.max"
+      [placeholder]="controlSchema.placeholder || controlSchema.label" />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NumberRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'forge-form-number-renderer',
+                    template: `
+    <input
+      class="forge-form-input"
+      data-test="number-input"
+      type="number"
+      [attr.id]="controlSchema.controlName"
+      [formControl]="control"
+      [attr.min]="controlSchema.min"
+      [attr.max]="controlSchema.max"
+      [placeholder]="controlSchema.placeholder || controlSchema.label" />
+  `,
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlSchema: [{
+                type: Input
+            }] } });
+
+class CheckboxRendererComponent {
+    control;
+    controlSchema;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CheckboxRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: CheckboxRendererComponent, isStandalone: true, selector: "forge-form-checkbox-renderer", inputs: { control: "control", controlSchema: "controlSchema" }, ngImport: i0, template: `
+    <input
+      class="forge-form-checkbox"
+      data-test="checkbox-input"
+      type="checkbox"
+      [attr.id]="controlSchema.controlName"
+      [formControl]="control" />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CheckboxRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'forge-form-checkbox-renderer',
+                    template: `
+    <input
+      class="forge-form-checkbox"
+      data-test="checkbox-input"
+      type="checkbox"
+      [attr.id]="controlSchema.controlName"
+      [formControl]="control" />
+  `,
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlSchema: [{
+                type: Input
+            }] } });
+
+class SelectRendererComponent {
+    control;
+    controlSchema;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SelectRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: SelectRendererComponent, isStandalone: true, selector: "forge-form-select-renderer", inputs: { control: "control", controlSchema: "controlSchema" }, ngImport: i0, template: `
+    <select
+      class="forge-form-select"
+      data-test="select-input"
+      [attr.id]="controlSchema.controlName"
+      [formControl]="control">
+      @if (controlSchema.placeholder || controlSchema.label) {
+        <option data-test="select-placeholder" [ngValue]="null" disabled>
+          {{ controlSchema.placeholder || controlSchema.label }}
+        </option>
+      }
+
+      @for (option of controlSchema.items; track option.value) {
+        <option data-test="select-option" [value]="option.value">
+          {{ option.label }}
+        </option>
+      }
+    </select>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SelectRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'forge-form-select-renderer',
+                    template: `
+    <select
+      class="forge-form-select"
+      data-test="select-input"
+      [attr.id]="controlSchema.controlName"
+      [formControl]="control">
+      @if (controlSchema.placeholder || controlSchema.label) {
+        <option data-test="select-placeholder" [ngValue]="null" disabled>
+          {{ controlSchema.placeholder || controlSchema.label }}
+        </option>
+      }
+
+      @for (option of controlSchema.items; track option.value) {
+        <option data-test="select-option" [value]="option.value">
+          {{ option.label }}
+        </option>
+      }
+    </select>
+  `,
+                    standalone: true,
+                    imports: [ReactiveFormsModule],
+                }]
+        }], propDecorators: { control: [{
+                type: Input
+            }], controlSchema: [{
+                type: Input
+            }] } });
+
+class GroupRendererComponent {
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: GroupRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: GroupRendererComponent, isStandalone: true, selector: "forge-form-group-renderer", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
+            FormBuilderService,
+            RendererRegistry,
+            {
+                provide: RENDERERS,
+                multi: true,
+                useValue: {
+                    type: 'text',
+                    component: TextRendererComponent,
+                },
+            },
+            {
+                provide: RENDERERS,
+                multi: true,
+                useValue: {
+                    type: 'number',
+                    component: NumberRendererComponent,
+                },
+            },
+            {
+                provide: RENDERERS,
+                multi: true,
+                useValue: {
+                    type: 'checkbox',
+                    component: CheckboxRendererComponent,
+                },
+            },
+            {
+                provide: RENDERERS,
+                multi: true,
+                useValue: {
+                    type: 'select',
+                    component: SelectRendererComponent,
+                },
+            },
+        ], ngImport: i0, template: "<div\r\n  data-test=\"group-container\"\r\n  [class]=\"\r\n    'forge-form-group forge-form-group--' + schema().options?.orientation\r\n  \">\r\n  @for (subjectSchema of schema().controls; track subjectSchema) {\r\n    @if (subjectSchema.type === 'group') {\r\n      <forge-form-group-renderer\r\n        data-test=\"nested-group\"\r\n        [form]=\"form()\"\r\n        [schema]=\"subjectSchema\" />\r\n    } @else {\r\n      <forge-form-field\r\n        data-test=\"group-field\"\r\n        [controlSchema]=\"subjectSchema\"\r\n        [control]=\"form().get(subjectSchema.controlName)!\" />\r\n    }\r\n  }\r\n</div>\r\n", dependencies: [{ kind: "component", type: GroupRendererComponent, selector: "forge-form-group-renderer", inputs: ["form", "schema"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FormFieldComponent, selector: "forge-form-field", inputs: ["control", "controlSchema"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: GroupRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'forge-form-group-renderer', imports: [ReactiveFormsModule, FormFieldComponent], providers: [
+                        FormBuilderService,
+                        RendererRegistry,
+                        {
+                            provide: RENDERERS,
+                            multi: true,
+                            useValue: {
+                                type: 'text',
+                                component: TextRendererComponent,
+                            },
+                        },
+                        {
+                            provide: RENDERERS,
+                            multi: true,
+                            useValue: {
+                                type: 'number',
+                                component: NumberRendererComponent,
+                            },
+                        },
+                        {
+                            provide: RENDERERS,
+                            multi: true,
+                            useValue: {
+                                type: 'checkbox',
+                                component: CheckboxRendererComponent,
+                            },
+                        },
+                        {
+                            provide: RENDERERS,
+                            multi: true,
+                            useValue: {
+                                type: 'select',
+                                component: SelectRendererComponent,
+                            },
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  data-test=\"group-container\"\r\n  [class]=\"\r\n    'forge-form-group forge-form-group--' + schema().options?.orientation\r\n  \">\r\n  @for (subjectSchema of schema().controls; track subjectSchema) {\r\n    @if (subjectSchema.type === 'group') {\r\n      <forge-form-group-renderer\r\n        data-test=\"nested-group\"\r\n        [form]=\"form()\"\r\n        [schema]=\"subjectSchema\" />\r\n    } @else {\r\n      <forge-form-field\r\n        data-test=\"group-field\"\r\n        [controlSchema]=\"subjectSchema\"\r\n        [control]=\"form().get(subjectSchema.controlName)!\" />\r\n    }\r\n  }\r\n</div>\r\n" }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }] } });
+
+class FormRendererComponent {
+    formService = inject((FormService));
+    schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : []));
+    formSubmit = output();
+    THEMES = THEMES;
+    formSignal = this.formService.form;
+    constructor() {
+        effect(() => {
+            this.formService.init(this.schema());
+        });
+    }
+    getControl(name) {
+        return this.formSignal().get(name);
+    }
+    onSubmit() {
+        if (this.formSignal().valid) {
+            this.formSubmit.emit(this.formSignal().value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FormRendererComponent, isStandalone: true, selector: "forge-form-angular", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, providers: [
+            FormBuilderService,
+            RendererRegistry,
+            FormService,
+            {
+                provide: RENDERERS,
+                multi: true,
+                useValue: {
+                    type: 'text',
+                    component: TextRendererComponent,
+                },
+            },
+            {
+                provide: RENDERERS,
+                multi: true,
+                useValue: {
+                    type: 'number',
+                    component: NumberRendererComponent,
+                },
+            },
+            {
+                provide: RENDERERS,
+                multi: true,
+                useValue: {
+                    type: 'checkbox',
+                    component: CheckboxRendererComponent,
+                },
+            },
+            {
+                provide: RENDERERS,
+                multi: true,
+                useValue: {
+                    type: 'select',
+                    component: SelectRendererComponent,
+                },
+            },
+            {
+                provide: FORM_OPTIONS,
+                useFactory: (component) => component.schema().options,
+                deps: [FormRendererComponent],
+            },
+            {
+                provide: ERROR_MESSAGES,
+                useValue: DEFAULT_ERROR_MESSAGES,
+                multi: true,
+            },
+            { provide: DEFAULT_ERROR_FALLBACK, useValue: 'Invalid field', multi: true },
+        ], ngImport: i0, template: "@if (!!formSignal()) {\r\n  <form\r\n    [class]=\"'forge-form forge-form--' + schema().options?.orientation\"\r\n    [class.forge-theme-default]=\"schema().options?.theme === THEMES.default\"\r\n    [formGroup]=\"formSignal()!\"\r\n    (ngSubmit)=\"onSubmit()\"\r\n    data-test=\"form\">\r\n    @for (subjectSchema of schema().controls; track subjectSchema) {\r\n      @if (subjectSchema.type === 'group') {\r\n        <forge-form-group-renderer\r\n          data-test=\"group-renderer\"\r\n          [form]=\"formSignal()!\"\r\n          [schema]=\"subjectSchema\" />\r\n      } @else {\r\n        <forge-form-field\r\n          data-test=\"form-field\"\r\n          [controlSchema]=\"subjectSchema\"\r\n          [control]=\"formSignal()!.get(subjectSchema.controlName)!\" />\r\n      }\r\n    }\r\n\r\n    <button\r\n      class=\"forge-form-button\"\r\n      [disabled]=\"!formSignal()?.valid\"\r\n      data-test=\"submit-button\"\r\n      type=\"submit\">\r\n      Submit\r\n    </button>\r\n  </form>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormFieldComponent, selector: "forge-form-field", inputs: ["control", "controlSchema"] }, { kind: "component", type: GroupRendererComponent, selector: "forge-form-group-renderer", inputs: ["form", "schema"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'forge-form-angular', imports: [ReactiveFormsModule, FormFieldComponent, GroupRendererComponent], providers: [
+                        FormBuilderService,
+                        RendererRegistry,
+                        FormService,
+                        {
+                            provide: RENDERERS,
+                            multi: true,
+                            useValue: {
+                                type: 'text',
+                                component: TextRendererComponent,
+                            },
+                        },
+                        {
+                            provide: RENDERERS,
+                            multi: true,
+                            useValue: {
+                                type: 'number',
+                                component: NumberRendererComponent,
+                            },
+                        },
+                        {
+                            provide: RENDERERS,
+                            multi: true,
+                            useValue: {
+                                type: 'checkbox',
+                                component: CheckboxRendererComponent,
+                            },
+                        },
+                        {
+                            provide: RENDERERS,
+                            multi: true,
+                            useValue: {
+                                type: 'select',
+                                component: SelectRendererComponent,
+                            },
+                        },
+                        {
+                            provide: FORM_OPTIONS,
+                            useFactory: (component) => component.schema().options,
+                            deps: [FormRendererComponent],
+                        },
+                        {
+                            provide: ERROR_MESSAGES,
+                            useValue: DEFAULT_ERROR_MESSAGES,
+                            multi: true,
+                        },
+                        { provide: DEFAULT_ERROR_FALLBACK, useValue: 'Invalid field', multi: true },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!!formSignal()) {\r\n  <form\r\n    [class]=\"'forge-form forge-form--' + schema().options?.orientation\"\r\n    [class.forge-theme-default]=\"schema().options?.theme === THEMES.default\"\r\n    [formGroup]=\"formSignal()!\"\r\n    (ngSubmit)=\"onSubmit()\"\r\n    data-test=\"form\">\r\n    @for (subjectSchema of schema().controls; track subjectSchema) {\r\n      @if (subjectSchema.type === 'group') {\r\n        <forge-form-group-renderer\r\n          data-test=\"group-renderer\"\r\n          [form]=\"formSignal()!\"\r\n          [schema]=\"subjectSchema\" />\r\n      } @else {\r\n        <forge-form-field\r\n          data-test=\"form-field\"\r\n          [controlSchema]=\"subjectSchema\"\r\n          [control]=\"formSignal()!.get(subjectSchema.controlName)!\" />\r\n      }\r\n    }\r\n\r\n    <button\r\n      class=\"forge-form-button\"\r\n      [disabled]=\"!formSignal()?.valid\"\r\n      data-test=\"submit-button\"\r\n      type=\"submit\">\r\n      Submit\r\n    </button>\r\n  </form>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }] } });
+
+class FormFieldContextComponent {
+    control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    controlValue = input.required(...(ngDevMode ? [{ debugName: "controlValue" }] : []));
+    controlErrors = input(null, ...(ngDevMode ? [{ debugName: "controlErrors" }] : []));
+    controlSchema = input.required(...(ngDevMode ? [{ debugName: "controlSchema" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormFieldContextComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: FormFieldContextComponent, isStandalone: true, inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, controlValue: { classPropertyName: "controlValue", publicName: "controlValue", isSignal: true, isRequired: true, transformFunction: null }, controlErrors: { classPropertyName: "controlErrors", publicName: "controlErrors", isSignal: true, isRequired: false, transformFunction: null }, controlSchema: { classPropertyName: "controlSchema", publicName: "controlSchema", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FormFieldContextComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], controlValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlValue", required: true }] }], controlErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlErrors", required: false }] }], controlSchema: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlSchema", required: true }] }] } });
+
+const required = (credentials) => ({
+    type: VALIDATOR_TYPES.required,
+    errorMessage: credentials?.errorMessage,
+});
+const minLength = ({ value, errorMessage, }) => ({
+    type: VALIDATOR_TYPES.minlength,
+    value: +value,
+    errorMessage,
+});
+const maxLength = ({ value, errorMessage, }) => ({
+    type: VALIDATOR_TYPES.maxlength,
+    value: +value,
+    errorMessage,
+});
+const min = ({ value, errorMessage, }) => ({
+    type: VALIDATOR_TYPES.min,
+    value: +value,
+    errorMessage,
+});
+const max = ({ value, errorMessage, }) => ({
+    type: VALIDATOR_TYPES.max,
+    value: +value,
+    errorMessage,
+});
+const customValidator = ({ key, fn, errorMessage, }) => ({
+    type: VALIDATOR_TYPES.custom,
+    key: key ?? '',
+    fn: fn ?? (() => null),
+    errorMessage,
+});
+
+const HINT_TYPES = {
+    text: 'text',
+    custom: 'custom',
+};
+
+/*
+ * Public API Surface of @forge-form/angular
+ */
+// Main entry component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_ERROR_FALLBACK, DEFAULT_ERROR_MESSAGES, ERROR_MESSAGES, FORM_OPTIONS, FormFieldContextComponent, FormRendererComponent, HINT_TYPES, ORIENTATION_OPTIONS, RENDERERS, RendererRegistry, THEMES, UPDATE_ON, VALIDATOR_TYPES, VISIBILITY_BEHAVIORS, customValidator, max, maxLength, min, minLength, required };
+//# sourceMappingURL=forge-form-angular.mjs.map