@tft/crispr-forms 21.0.6 → 21.0.8

package/fesm2022/{tft-crispr-forms-tft-crispr-forms-Dhjn_QdV.mjs → tft-crispr-forms-tft-crispr-forms-Dxdiigcv.mjs}

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { signal, input, computed, Input, Directive, inject, DestroyRef, EventEmitter, effect, Output, ViewContainerRef, Renderer2, ChangeDetectorRef, Pipe, NgModule, ViewChild, Component, HostListener, ChangeDetectionStrategy } from '@angular/core';
+import { input, computed, Directive, inject, DestroyRef, EventEmitter, effect, Output, ViewContainerRef, Renderer2, Pipe, NgModule, output, untracked, ViewChild, ChangeDetectionStrategy, Component, HostListener, Input, signal } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule, NgControl } from '@angular/forms';
 import * as i6 from '@tft/form-validation-handler';
 import { FormValidationHandlerModule } from '@tft/form-validation-handler';
-import { from, of, isObservable } from 'rxjs';
+import { takeUntilDestroyed, outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
 import { map, startWith, debounceTime, distinctUntilChanged, switchMap, shareReplay, tap } from 'rxjs/operators';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { from, of, isObservable } from 'rxjs';
 import * as i1$3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/icon';
@@ -213,7 +213,11 @@ function allowedFileType(matchExp) {
 
 class CrisprFieldComponent {
     constructor() {
-        this.config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.inputConfig = input(null, { ...(ngDevMode ? { debugName: "inputConfig" } : {}), alias: 'config' });
+        this.config = computed(() => {
+            const c = this.inputConfig();
+            return c && this.defaultConfig ? { ...this.defaultConfig, ...c } : c;
+        }, ...(ngDevMode ? [{ debugName: "config" }] : []));
         this.testIdPrefix = input(undefined, ...(ngDevMode ? [{ debugName: "testIdPrefix" }] : []));
         this.testId = computed(() => {
             const controlName = this.config()?.controlName;
@@ -223,46 +227,24 @@ class CrisprFieldComponent {
             return prefix ? `${prefix}.${controlName}` : controlName;
         }, ...(ngDevMode ? [{ debugName: "testId" }] : []));
     }
-    // eslint-disable-next-line @angular-eslint/no-input-rename
-    set inputConfig(config) {
-        this.updateConfig(config);
-    }
-    updateConfig(inputConfig) {
-        const mergedConfig = this.defaultConfig ? { ...this.defaultConfig, ...inputConfig } : inputConfig;
-        this.config.set(mergedConfig);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: CrisprFieldComponent, isStandalone: true, inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "config", isSignal: false, isRequired: false, transformFunction: null }, testIdPrefix: { classPropertyName: "testIdPrefix", publicName: "testIdPrefix", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: CrisprFieldComponent, isStandalone: true, inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, testIdPrefix: { classPropertyName: "testIdPrefix", publicName: "testIdPrefix", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFieldComponent, decorators: [{
             type: Directive,
             args: [{
                     standalone: true
                 }]
-        }], propDecorators: { inputConfig: [{
-                type: Input,
-                args: [{ alias: 'config' }]
-            }], testIdPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "testIdPrefix", required: false }] }] } });
+        }], propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], testIdPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "testIdPrefix", required: false }] }] } });
 
 class CrisprControlComponent extends CrisprFieldComponent {
-    // eslint-disable-next-line @angular-eslint/no-input-rename
-    set inputGroup(group) {
-        this.group.set(group);
-    }
-    /*
-      * Having the input alias allows us to consume these components in the traditional Angular way as well as progammatically in the form builder
-      */
-    // eslint-disable-next-line @angular-eslint/no-input-rename
-    set inputValue(value) {
-        this.value.set(value);
-    }
     constructor() {
         super();
         this.destroyRef = inject(DestroyRef);
-        this.group = signal(null, ...(ngDevMode ? [{ debugName: "group" }] : []));
+        this.group = input(null, ...(ngDevMode ? [{ debugName: "group" }] : []));
         this.control = computed(() => this.group()?.get(this.config().controlName), ...(ngDevMode ? [{ debugName: "control" }] : []));
         this.valueChanges = new EventEmitter();
-        this.value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
         effect(() => {
             this.setControlValue(this.value());
         });
@@ -282,22 +264,16 @@ class CrisprControlComponent extends CrisprFieldComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: CrisprControlComponent, isStandalone: true, inputs: { inputGroup: ["group", "inputGroup"], inputValue: ["value", "inputValue"] }, outputs: { valueChanges: "valueChanges" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: CrisprControlComponent, isStandalone: true, inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanges: "valueChanges" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprControlComponent, decorators: [{
             type: Directive,
             args: [{
                     standalone: true
                 }]
-        }], ctorParameters: () => [], propDecorators: { inputGroup: [{
-                type: Input,
-                args: [{ alias: 'group' }]
-            }], valueChanges: [{
+        }], ctorParameters: () => [], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], valueChanges: [{
                 type: Output
-            }], inputValue: [{
-                type: Input,
-                args: [{ alias: 'value' }]
-            }] } });
+            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
 class AbstractAutocompleteComponent extends CrisprControlComponent {
@@ -305,7 +281,8 @@ class AbstractAutocompleteComponent extends CrisprControlComponent {
         super(...arguments);
         // we need a separate control for the UI because of the way the material autocomplete chiplist works
         this.autocompleteInputControl = new FormControl('');
-        this.config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        // Narrows the parent's computed config type to include C-specific properties (e.g. chiplist-only fields)
+        this.config = computed(() => this.inputConfig(), ...(ngDevMode ? [{ debugName: "config" }] : []));
     }
     ngOnInit() {
         super.ngOnInit();
@@ -334,22 +311,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
 const FIELD_COMPONENTS = {
     groupList: () => Promise.resolve().then(function () { return index$1; }).then(({ FormGroupListComponent }) => FormGroupListComponent),
     subGroup: () => Promise.resolve().then(function () { return index; }).then(({ SubGroupComponent }) => SubGroupComponent),
-    button: () => import('./tft-crispr-forms-index-g-9P16CE.mjs').then(({ ButtonComponent }) => ButtonComponent),
-    input: () => import('./tft-crispr-forms-index-CLSsoEGa.mjs').then(({ InputFieldComponent }) => InputFieldComponent),
-    select: () => import('./tft-crispr-forms-index-BNGj_Q31.mjs').then(({ SelectFieldComponent }) => SelectFieldComponent),
-    radio: () => import('./tft-crispr-forms-index-hpO3y8-r.mjs').then(({ RadioFieldComponent }) => RadioFieldComponent),
-    autocomplete: () => import('./tft-crispr-forms-index-CXHhQct3.mjs').then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
-    autocompleteChiplist: () => import('./tft-crispr-forms-index-Cch_yKzh.mjs').then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
-    map: () => import('./tft-crispr-forms-index-BVUDqeAd.mjs').then(({ MapFieldComponent }) => MapFieldComponent),
-    textarea: () => import('./tft-crispr-forms-index-B9tVg0fe.mjs').then(({ TextareaFieldComponent }) => TextareaFieldComponent),
-    checkbox: () => import('./tft-crispr-forms-index-SXLsJ2dx.mjs').then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
-    slider: () => import('./tft-crispr-forms-index-By2zsul9.mjs').then(({ SliderFieldComponent }) => SliderFieldComponent),
-    datepicker: () => import('./tft-crispr-forms-index-1oUkFYPd.mjs').then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
+    button: () => import('./tft-crispr-forms-index-Ba-C0nF_.mjs').then(({ ButtonComponent }) => ButtonComponent),
+    input: () => import('./tft-crispr-forms-index-WCrUN4T4.mjs').then(({ InputFieldComponent }) => InputFieldComponent),
+    select: () => import('./tft-crispr-forms-index-DA3brqkq.mjs').then(({ SelectFieldComponent }) => SelectFieldComponent),
+    radio: () => import('./tft-crispr-forms-index-CCjdBVC7.mjs').then(({ RadioFieldComponent }) => RadioFieldComponent),
+    autocomplete: () => import('./tft-crispr-forms-index-n6rbP8zG.mjs').then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
+    autocompleteChiplist: () => import('./tft-crispr-forms-index-zOK3hAcJ.mjs').then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
+    map: () => import('./tft-crispr-forms-index-Rh3_5mZk.mjs').then(({ MapFieldComponent }) => MapFieldComponent),
+    textarea: () => import('./tft-crispr-forms-index-Dzx5A98j.mjs').then(({ TextareaFieldComponent }) => TextareaFieldComponent),
+    checkbox: () => import('./tft-crispr-forms-index-MxoL7osu.mjs').then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
+    slider: () => import('./tft-crispr-forms-index-evHXy0wa.mjs').then(({ SliderFieldComponent }) => SliderFieldComponent),
+    datepicker: () => import('./tft-crispr-forms-index-3WrRXaWV.mjs').then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
     fileUpload: () => Promise.resolve().then(function () { return index$3; }).then(({ FileUploadFieldComponent }) => FileUploadFieldComponent),
-    imageUpload: () => import('./tft-crispr-forms-index-BYfudl7n.mjs').then(({ ImageUploadFieldComponent }) => ImageUploadFieldComponent),
+    imageUpload: () => import('./tft-crispr-forms-index-D0dpKcvi.mjs').then(({ ImageUploadFieldComponent }) => ImageUploadFieldComponent),
     heading: () => Promise.resolve().then(function () { return index$2; }).then(({ HeadingComponent }) => HeadingComponent),
-    divider: () => import('./tft-crispr-forms-index-CMJfbPJv.mjs').then(({ DividerComponent }) => DividerComponent),
-    unitConversion: () => import('./tft-crispr-forms-index-HtH17liK.mjs').then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent),
+    divider: () => import('./tft-crispr-forms-index-CmBSNzoP.mjs').then(({ DividerComponent }) => DividerComponent),
+    unitConversion: () => import('./tft-crispr-forms-index-Cch_cBxr.mjs').then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent),
 };
 function isControlComponent(component) {
     return component && isControlConfig(component.config()) && 'value' in component;
@@ -361,55 +338,46 @@ function isControlOrButtonComponent(component) {
 
 class CrisprFieldDirective {
     constructor() {
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+        this.group = input(...(ngDevMode ? [undefined, { debugName: "group" }] : []));
+        this.testIdPrefix = input(undefined, ...(ngDevMode ? [{ debugName: "testIdPrefix" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
         this.container = inject(ViewContainerRef);
         this.renderer = inject(Renderer2);
-        this.cdr = inject(ChangeDetectorRef);
-    }
-    set value(value) {
-        this._value = value;
-        // This is needed to keep the group list from resetting control values to the initial input value
-        this.updateComponentValue(value);
-    }
-    get value() {
-        return this._value;
+        effect(() => {
+            this.updateComponentValue(this.value());
+        });
     }
     async ngOnInit() {
-        /**
-         * create component and set values from config on its instance
-         */
-        const component = this.config.component ||
-            (await FIELD_COMPONENTS[this.config.controlType]());
-        const componentRef = this.container.createComponent(component);
-        this.component = componentRef.instance;
-        componentRef.setInput('config', this.config);
+        const component = this.config().component ||
+            (await FIELD_COMPONENTS[this.config().controlType]());
+        this.componentRef =
+            this.container.createComponent(component);
+        this.component = this.componentRef.instance;
+        this.componentRef.setInput('config', this.config());
         if (isControlOrButtonComponent(this.component)) {
-            componentRef.setInput('group', this.group);
+            this.componentRef.setInput('group', this.group());
         }
-        componentRef.setInput('testIdPrefix', this.testIdPrefix);
-        this.updateComponentValue(this.value);
-        // adds any config classes to the dynamically generated component
-        // doing this here keeps us from having to extend a base component into each field component individually
-        if (!this.config.classes)
+        this.componentRef.setInput('testIdPrefix', this.testIdPrefix());
+        this.updateComponentValue(this.value());
+        if (!this.config().classes)
             return;
-        this.config.classes.forEach((klass) => {
-            // check for passing multiple classes in one array element
+        this.config().classes.forEach((klass) => {
             if (klass.includes(' ')) {
                 throw Error(`Improperly formatted class. '${klass}' cannot contain spaces.`);
             }
             else {
-                this.renderer.addClass(componentRef.location.nativeElement, klass);
+                this.renderer.addClass(this.componentRef.location.nativeElement, klass);
             }
         });
     }
     updateComponentValue(value) {
-        if (isControlComponent(this.component)) {
-            this.component.value.set(value);
-            // SubGroups won't populate without this detectChanges
-            this.cdr.detectChanges();
+        if (this.componentRef && isControlComponent(this.component)) {
+            this.componentRef.setInput('value', value);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: CrisprFieldDirective, isStandalone: true, selector: "[crisprField]", inputs: { config: "config", group: "group", testIdPrefix: "testIdPrefix", value: "value" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: CrisprFieldDirective, isStandalone: true, selector: "[crisprField]", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, testIdPrefix: { classPropertyName: "testIdPrefix", publicName: "testIdPrefix", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFieldDirective, decorators: [{
             type: Directive,
@@ -417,15 +385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                     selector: '[crisprField]',
                     standalone: true,
                 }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], testIdPrefix: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], testIdPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "testIdPrefix", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 class InitialControlValuePipe {
     // TODO: does changing any to unknown break anything?
@@ -467,49 +427,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
 
 class CrisprFormComponent {
     constructor() {
-        this.form = new FormGroup({});
-        this.value = null;
-        this.submitted = new EventEmitter();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.form = input(new FormGroup({}), ...(ngDevMode ? [{ debugName: "form" }] : []));
+        this.value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.submitted = output();
+        /** Patch form values whenever the [value] input changes without firing valueChanges. */
+        this.patchValueEffect = effect(() => {
+            const value = this.value();
+            untracked(() => {
+                if (value) {
+                    this.form().patchValue(value, { emitEvent: false });
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "patchValueEffect" }] : []));
         // proxy value and status change events through to consuming component
-        this.valueChanges = this.form.valueChanges;
-        this.statusChanges = this.form.statusChanges;
+        this.valueChanges = outputFromObservable(toObservable(this.form).pipe(switchMap((f) => f.valueChanges)));
+        this.statusChanges = outputFromObservable(toObservable(this.form).pipe(switchMap((f) => f.statusChanges)));
     }
     ngOnInit() {
         // build out the form, note that we pass in the form as the third argument and the function modifies it
-        buildFormGroupFromConfig(this.config, this.value, this.form);
+        buildFormGroupFromConfig(this.config(), this.value(), this.form());
     }
     handleSubmit() {
-        this.form.markAllAsTouched();
-        this.submitted.emit(this.form);
+        this.form().markAllAsTouched();
+        this.submitted.emit(this.form());
     }
     triggerSubmit() {
         this.submitTrigger.nativeElement.click();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: CrisprFormComponent, isStandalone: true, selector: "crispr-form", inputs: { config: "config", form: "form", value: "value" }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true }], ngImport: i0, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  @for (field of config.fields; track field) {\n    <ng-container\n      crisprField\n      [value]=\"value | initialControlValue : field\"\n      [config]=\"field\"\n      [group]=\"form\">\n    </ng-container>\n  }\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n  Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n  (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" data-testid=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "testIdPrefix", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: CrisprFormComponent, isStandalone: true, selector: "crispr-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true }], ngImport: i0, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config().classes\"\n  [formGroup]=\"form()\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config().autocomplete || 'off'\"\n  [errorDictionary]=\"config().errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  @for (field of config().fields; track field) {\n    <ng-container\n      crisprField\n      [value]=\"value() | initialControlValue : field\"\n      [config]=\"field\"\n      [group]=\"form()\">\n    </ng-container>\n  }\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n  Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n  (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" data-testid=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "testIdPrefix", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-form', imports: [
+            args: [{ selector: 'crispr-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
                         CrisprFieldDirective,
                         ReactiveFormsModule,
                         FormValidationHandlerModule,
                         CrisprPipesModule,
-                    ], template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  @for (field of config.fields; track field) {\n    <ng-container\n      crisprField\n      [value]=\"value | initialControlValue : field\"\n      [config]=\"field\"\n      [group]=\"form\">\n    </ng-container>\n  }\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n  Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n  (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" data-testid=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], form: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], submitted: [{
-                type: Output
-            }], valueChanges: [{
-                type: Output
-            }], statusChanges: [{
-                type: Output
-            }], submitTrigger: [{
+                    ], template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config().classes\"\n  [formGroup]=\"form()\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config().autocomplete || 'off'\"\n  [errorDictionary]=\"config().errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  @for (field of config().fields; track field) {\n    <ng-container\n      crisprField\n      [value]=\"value() | initialControlValue : field\"\n      [config]=\"field\"\n      [group]=\"form()\">\n    </ng-container>\n  }\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n  Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n  (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" data-testid=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], valueChanges: [{ type: i0.Output, args: ["valueChanges"] }], statusChanges: [{ type: i0.Output, args: ["statusChanges"] }], submitTrigger: [{
                 type: ViewChild,
                 args: ['submitTrigger']
             }] } });
@@ -553,18 +511,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
             }] } });
 
 class InfoComponent {
+    constructor() {
+        this.info = input.required(...(ngDevMode ? [{ debugName: "info" }] : []));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: InfoComponent, isStandalone: true, selector: "crispr-info", inputs: { info: "info" }, ngImport: i0, template: "@if (info) {\n  <mat-icon\n    [matTooltip]=\"info.content\"\n    [matTooltipPosition]=\"info.tooltipPosition || 'below'\">\n    {{info.iconName || 'info'}}\n  </mat-icon>\n}\n", styles: [":host{margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: InfoComponent, isStandalone: true, selector: "crispr-info", inputs: { info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (info()) {\n  <mat-icon\n    [matTooltip]=\"info().content\"\n    [matTooltipPosition]=\"info().tooltipPosition || 'below'\">\n    {{info().iconName || 'info'}}\n  </mat-icon>\n}\n", styles: [":host{margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-info', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'crispr-info', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatIconModule,
                         MatTooltipModule
-                    ], template: "@if (info) {\n  <mat-icon\n    [matTooltip]=\"info.content\"\n    [matTooltipPosition]=\"info.tooltipPosition || 'below'\">\n    {{info.iconName || 'info'}}\n  </mat-icon>\n}\n", styles: [":host{margin-left:4px}\n"] }]
-        }], propDecorators: { info: [{
-                type: Input
-            }] } });
+                    ], template: "@if (info()) {\n  <mat-icon\n    [matTooltip]=\"info().content\"\n    [matTooltipPosition]=\"info().tooltipPosition || 'below'\">\n    {{info().iconName || 'info'}}\n  </mat-icon>\n}\n", styles: [":host{margin-left:4px}\n"] }]
+        }], propDecorators: { info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: true }] }] } });
 
 const defaultConfig$1 = {
     typographyClass: 'mat-h3',
@@ -584,17 +543,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
 
 class FieldContainerComponent {
     constructor() {
+        // the configuration object for the field
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        // the parent formGroup
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
         // boolean whether field-container is inline
-        this.inlineField = false;
+        this.inlineField = input(false, ...(ngDevMode ? [{ debugName: "inlineField" }] : []));
         this.subs = [];
     }
     ngOnInit() {
-        this.disabled$ = this.connectDisabledCallback(this.group, this.config);
+        this.disabled$ = this.connectDisabledCallback(this.group(), this.config());
         // we tried moving this into afterViewChecked and afterContentChecked lifecycle hooks without any luck
-        if (this.config.computeValue) {
-            this.subs.push(this.config
-                .computeValue(this.group)
-                .pipe(distinctUntilChanged(), tap((computedValue) => this.group.get(this.config.controlName).setValue(computedValue)))
+        if (this.config().computeValue) {
+            this.subs.push(this.config()
+                .computeValue(this.group())
+                .pipe(distinctUntilChanged(), tap((computedValue) => this.group().get(this.config().controlName).setValue(computedValue)))
                 .subscribe());
         }
     }
@@ -616,41 +579,35 @@ class FieldContainerComponent {
             config.disabledCallback instanceof Function
             ? config.disabledCallback(group).pipe(
             // This enables/disables when callback conditions are met
-            tap((shouldDisable) => shouldDisable ? control.disable() : control.enable()))
+            tap((shouldDisable) => shouldDisable
+                ? control.disable({ emitEvent: false })
+                : control.enable({ emitEvent: false })))
             : of(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FieldContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: FieldContainerComponent, isStandalone: true, selector: "crispr-field-container", inputs: { config: "config", group: "group", inlineField: "inlineField" }, ngImport: i0, template: "@if ((disabled$ | async) ? !config.hideDisabled : true) {\n  <div\n    [ngClass]=\"config.classes\"\n    [class.inline-field]=\"inlineField\"\n    class=\"field-container\">\n    @if (config.heading) {\n      <crispr-heading\n        [config]=\"config.heading\">\n      </crispr-heading>\n    }\n    <ng-content>\n    </ng-content>\n  </div>\n}\n", styles: ["::ng-deep mat-form-field.mat-mdc-form-field{display:block;padding:.25em 0}.inline-field{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeadingComponent, selector: "crispr-heading" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: FieldContainerComponent, isStandalone: true, selector: "crispr-field-container", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, inlineField: { classPropertyName: "inlineField", publicName: "inlineField", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if ((disabled$ | async) ? !config().hideDisabled : true) {\n  <div\n    [ngClass]=\"config().classes\"\n    [class.inline-field]=\"inlineField()\"\n    class=\"field-container\">\n    @if (config().heading) {\n      <crispr-heading\n        [config]=\"config().heading\">\n      </crispr-heading>\n    }\n    <ng-content>\n    </ng-content>\n  </div>\n}\n", styles: ["::ng-deep mat-form-field.mat-mdc-form-field{display:block;padding:.25em 0}.inline-field{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: HeadingComponent, selector: "crispr-heading" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FieldContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-field-container', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, HeadingComponent], template: "@if ((disabled$ | async) ? !config.hideDisabled : true) {\n  <div\n    [ngClass]=\"config.classes\"\n    [class.inline-field]=\"inlineField\"\n    class=\"field-container\">\n    @if (config.heading) {\n      <crispr-heading\n        [config]=\"config.heading\">\n      </crispr-heading>\n    }\n    <ng-content>\n    </ng-content>\n  </div>\n}\n", styles: ["::ng-deep mat-form-field.mat-mdc-form-field{display:block;padding:.25em 0}.inline-field{display:inline-block}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], inlineField: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'crispr-field-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, HeadingComponent], template: "@if ((disabled$ | async) ? !config().hideDisabled : true) {\n  <div\n    [ngClass]=\"config().classes\"\n    [class.inline-field]=\"inlineField()\"\n    class=\"field-container\">\n    @if (config().heading) {\n      <crispr-heading\n        [config]=\"config().heading\">\n      </crispr-heading>\n    }\n    <ng-content>\n    </ng-content>\n  </div>\n}\n", styles: ["::ng-deep mat-form-field.mat-mdc-form-field{display:block;padding:.25em 0}.inline-field{display:inline-block}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], inlineField: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineField", required: false }] }] } });
 
 class SelectedFileComponent {
+    constructor() {
+        this.fileName = input.required(...(ngDevMode ? [{ debugName: "fileName" }] : []));
+        this.progress = input(...(ngDevMode ? [undefined, { debugName: "progress" }] : []));
+        this.showProgress = input(...(ngDevMode ? [undefined, { debugName: "showProgress" }] : []));
+        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SelectedFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SelectedFileComponent, isStandalone: true, selector: "crispr-selected-file", inputs: { fileName: "fileName", progress: "progress", showProgress: "showProgress", color: "color" }, ngImport: i0, template: "<h3 class=\"mat-h3\">{{ fileName }}</h3>\n@if (showProgress) {\n  <mat-progress-bar\n    mode=\"determinate\"\n    [color]=\"color\"\n    [value]=\"progress\">\n  </mat-progress-bar>\n}\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], preserveWhitespaces: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SelectedFileComponent, isStandalone: true, selector: "crispr-selected-file", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: true, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h3 class=\"mat-h3\">{{ fileName() }}</h3>\n@if (showProgress()) {\n  <mat-progress-bar\n    mode=\"determinate\"\n    [color]=\"color()\"\n    [value]=\"progress()\">\n  </mat-progress-bar>\n}\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SelectedFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-selected-file', imports: [
+            args: [{ selector: 'crispr-selected-file', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatProgressBarModule
-                    ], template: "<h3 class=\"mat-h3\">{{ fileName }}</h3>\n@if (showProgress) {\n  <mat-progress-bar\n    mode=\"determinate\"\n    [color]=\"color\"\n    [value]=\"progress\">\n  </mat-progress-bar>\n}\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"] }]
-        }], propDecorators: { fileName: [{
-                type: Input
-            }], progress: [{
-                type: Input
-            }], showProgress: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
+                    ], template: "<h3 class=\"mat-h3\">{{ fileName() }}</h3>\n@if (showProgress()) {\n  <mat-progress-bar\n    mode=\"determinate\"\n    [color]=\"color()\"\n    [value]=\"progress()\">\n  </mat-progress-bar>\n}\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"] }]
+        }], propDecorators: { fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: true }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 /* eslint-disable @nx/enforce-module-boundaries */
 class FileUploadFieldComponent extends CrisprControlComponent {
@@ -754,35 +711,30 @@ var index$2 = /*#__PURE__*/Object.freeze({
 class CrisprDisplayFieldDirective {
     constructor() {
         this.container = inject(ViewContainerRef);
-        this.cdr = inject(ChangeDetectorRef);
-    }
-    set value(value) {
-        this._value = value;
-        // This is needed to keep the group list from resetting control values to the initial input value
-        this.updateComponentValue(value);
-    }
-    get value() {
-        return this._value;
+        this.group = input(...(ngDevMode ? [undefined, { debugName: "group" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.component = input(...(ngDevMode ? [undefined, { debugName: "component" }] : []));
+        this.index = input(...(ngDevMode ? [undefined, { debugName: "index" }] : []));
+        effect(() => {
+            this.updateComponentValue(this.value());
+        });
     }
     async ngOnInit() {
-        if (this.component) {
-            /**
-             * create component and set values from config on its instance
-             */
-            const componentRef = this.container.createComponent(this.component);
+        if (this.component()) {
+            const componentRef = this.container.createComponent(this.component());
+            this.componentRef = componentRef;
             this.componentInstance = componentRef.instance;
-            this.componentInstance.index = this.index;
-            this.updateComponentValue(this.value);
+            this.componentInstance.index = this.index();
+            this.updateComponentValue(this.value());
         }
     }
     updateComponentValue(value) {
-        if (!this.componentInstance)
+        if (!this.componentRef)
             return;
-        this.componentInstance.value = value;
-        this.cdr.detectChanges();
+        this.componentRef.setInput('value', value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprDisplayFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: CrisprDisplayFieldDirective, isStandalone: true, selector: "[crisprDisplayField]", inputs: { group: "group", value: "value", component: "component", index: "index" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: CrisprDisplayFieldDirective, isStandalone: true, selector: "[crisprDisplayField]", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprDisplayFieldDirective, decorators: [{
             type: Directive,
@@ -790,15 +742,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
                     selector: '[crisprDisplayField]',
                     standalone: true,
                 }]
-        }], propDecorators: { group: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], component: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
 
 const defaultConfig = {
     addButtonLabel: 'ADD ITEM',
@@ -807,7 +751,6 @@ const defaultConfig = {
 class FormGroupListComponent extends CrisprControlComponent {
     constructor() {
         super(...arguments);
-        this.cdr = inject(ChangeDetectorRef);
         this.defaultConfig = defaultConfig;
         /**
          * By setting this to true when adding/removing items from array,
@@ -821,22 +764,19 @@ class FormGroupListComponent extends CrisprControlComponent {
         // TODO: this is required to ngFor of controls in template, must be a better way
     }
     setControlValue(values) {
-        if (this.control()) {
+        const formArray = this.control();
+        if (formArray) {
             if (values?.length > 0) {
                 // clear any existing values so that new values don't concatenate onto the old
-                const currentValues = this.control().value;
+                const currentValues = formArray.value;
                 if (currentValues.length) {
-                    this.control().clear();
+                    formArray.clear();
                 }
                 values.forEach((value) => this.addGroup(value));
             }
             else if (this.config().displayInitialItem) {
                 this.addGroup();
             }
-            // needed to ensure new array items render
-            setTimeout(() => {
-                this.cdr.detectChanges();
-            });
         }
     }
     clickDelete(index) {
@@ -848,14 +788,12 @@ class FormGroupListComponent extends CrisprControlComponent {
         this.addGroup();
     }
     addGroup(value = null) {
-        this.control().push(createControlForType(this.config().itemConfig, value));
-        // needed to ensure new array items render
-        setTimeout(() => {
-            this.cdr.detectChanges();
-        });
+        const formArray = this.control();
+        formArray.push(createControlForType(this.config().itemConfig, value));
     }
     deleteGroup(index) {
-        this.control().removeAt(index);
+        const formArray = this.control();
+        formArray.removeAt(index);
     }
     clickEditItem(index) {
         this.selectedIndex = index;
@@ -887,44 +825,34 @@ class SubGroupComponent extends CrisprControlComponent {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SubGroupComponent, isStandalone: false, selector: "crispr-sub-group", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n  <ng-container crisprField [value]=\"value | initialControlValue : fieldConfig\" [config]=\"fieldConfig\"\n    [group]=\"control()\" [testIdPrefix]=\"testId()\">\n  </ng-container>\n  }\n</crispr-field-container>", styles: [""], dependencies: [{ kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "testIdPrefix", "value"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SubGroupComponent, isStandalone: true, selector: "crispr-sub-group", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n  <ng-container crisprField [value]=\"value | initialControlValue : fieldConfig\" [config]=\"fieldConfig\"\n    [group]=\"control()\" [testIdPrefix]=\"testId()\">\n  </ng-container>\n  }\n</crispr-field-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "testIdPrefix", "value"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-sub-group', standalone: false, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n  <ng-container crisprField [value]=\"value | initialControlValue : fieldConfig\" [config]=\"fieldConfig\"\n    [group]=\"control()\" [testIdPrefix]=\"testId()\">\n  </ng-container>\n  }\n</crispr-field-container>" }]
+            args: [{ selector: 'crispr-sub-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        CrisprFieldDirective,
+                        FieldContainerComponent,
+                        CrisprPipesModule,
+                        FormValidationHandlerModule,
+                    ], template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n  <ng-container crisprField [value]=\"value | initialControlValue : fieldConfig\" [config]=\"fieldConfig\"\n    [group]=\"control()\" [testIdPrefix]=\"testId()\">\n  </ng-container>\n  }\n</crispr-field-container>" }]
         }] });
 
+/**
+ * @deprecated SubGroupComponent is now standalone. Import SubGroupComponent directly.
+ * This module will be removed in the next major version.
+ */
 class SubGroupModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.6", ngImport: i0, type: SubGroupModule, declarations: [SubGroupComponent], imports: [CommonModule,
-            CrisprFieldDirective,
-            FieldContainerComponent,
-            CrisprPipesModule,
-            // TODO: Does this need to be here?
-            FormValidationHandlerModule], exports: [SubGroupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupModule, imports: [CommonModule,
-            FieldContainerComponent,
-            CrisprPipesModule,
-            // TODO: Does this need to be here?
-            FormValidationHandlerModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.6", ngImport: i0, type: SubGroupModule, imports: [SubGroupComponent], exports: [SubGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupModule, imports: [SubGroupComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule,
-                        CrisprFieldDirective,
-                        FieldContainerComponent,
-                        CrisprPipesModule,
-                        // TODO: Does this need to be here?
-                        FormValidationHandlerModule
-                    ],
-                    exports: [
-                        SubGroupComponent
-                    ],
-                    declarations: [
-                        SubGroupComponent
-                    ]
+                    imports: [SubGroupComponent],
+                    exports: [SubGroupComponent],
                 }]
         }] });
 
@@ -934,6 +862,9 @@ var index = /*#__PURE__*/Object.freeze({
     SubGroupModule: SubGroupModule
 });
 
+/**
+ * @deprecated Use stanadlone CripsrFormComponent
+ */
 class CrisprFormsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormsModule, imports: [CommonModule,
@@ -979,4 +910,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImpor
  */
 
 export { AbstractAutocompleteComponent as A, CrisprFieldComponent as C, DEFAULT_EMPTY_OPTIONS_MESSAGE as D, FieldContainerComponent as F, HeadingComponent as H, InfoComponent as I, SelectedFileComponent as S, CrisprControlComponent as a, buildFormGroupFromConfig as b, CrisprFieldDirective as c, ControlType as d, convertBytesToMb as e, FileDropzoneDirective as f, CrisprDisplayFieldComponent as g, CrisprFormComponent as h, CrisprFormsModule as i, FileUploadFieldComponent as j, allowedFileExtValidator as k, allowedFileType as l, callOptionsIfFunction as m, createControlForType as n, observablifyOptions as o, filterOptionsByLabel as p, isControlConfig as q, maxFileSizeValidator as r, valueIn as v };
-//# sourceMappingURL=tft-crispr-forms-tft-crispr-forms-Dhjn_QdV.mjs.map
+//# sourceMappingURL=tft-crispr-forms-tft-crispr-forms-Dxdiigcv.mjs.map