@tft/crispr-forms 18.0.2 → 19.0.2

package/fesm2022/tft-crispr-forms.mjs

@@ -1,24 +1,25 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Pipe, NgModule, EventEmitter, Component, Output, ViewChild, HostListener, ChangeDetectionStrategy, Optional, Self } from '@angular/core';
+import { signal, Input, Directive, inject, DestroyRef, computed, EventEmitter, effect, Output, Pipe, NgModule, ViewChild, Component, HostListener, ChangeDetectionStrategy, Optional, Self } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import * as i7 from '@tft/form-validation-handler';
+import * as i6 from '@tft/form-validation-handler';
 import { FormValidationHandlerModule } from '@tft/form-validation-handler';
 import { from, of, isObservable } from 'rxjs';
 import { map, startWith, debounceTime, distinctUntilChanged, switchMap, shareReplay, tap } from 'rxjs/operators';
-import * as i2$2 from '@angular/material/button';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i3 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3$2 from '@angular/material/form-field';
+import * as i2$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/input';
+import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$1 from '@angular/material/tooltip';
+import * as i2$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i2$1 from '@angular/material/progress-bar';
+import * as i1$2 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 function valueIn(values) {
@@ -70,51 +71,6 @@ var ControlType;
     ControlType["UNIT_CONVERSION"] = "unitConversion";
 })(ControlType || (ControlType = {}));
 
-;
-
-function crisprControlMixin(BaseClass) {
-    return class extends BaseClass {
-        set value(value) {
-            this.setControlValue(value);
-            this._value = value;
-        }
-        get value() {
-            return this._value;
-        }
-        ngOnInit() {
-            super.ngOnInit();
-            this.control = this.group.get(this.config.controlName);
-            this.setControlValue(this.value);
-            // setTimeouts are ugly but this seems to be the only way to get the computed field to compute initial values
-            setTimeout(() => {
-                this.control.updateValueAndValidity();
-            });
-        }
-        setControlValue(value) {
-            if (value && this.control && this.config.controlType !== ControlType.SUB_GROUP) {
-                this.control.setValue(value);
-            }
-        }
-    };
-}
-
-class CrisprFieldComponent {
-    ngOnInit() {
-        this.applyDefaultConfig();
-    }
-    applyDefaultConfig() {
-        this.config = this.defaultConfig ? { ...this.defaultConfig, ...this.config } : this.config;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.3", type: CrisprFieldComponent, isStandalone: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprFieldComponent, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true
-                }]
-        }] });
-
 /**
  * Analyze the config and build a form control to spec. Notice we don't use FormBuilder here
  * as we want to keep this function pure.
@@ -255,65 +211,145 @@ function allowedFileType(matchExp) {
     };
 }
 
-const AbstractAutocompleteFieldMixin = crisprControlMixin(CrisprFieldComponent);
+class CrisprFieldComponent {
+    constructor() {
+        this.config = signal(null, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    }
+    // 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: "14.0.0", version: "21.1.6", type: CrisprFieldComponent, isStandalone: true, inputs: { inputConfig: ["config", "inputConfig"] }, 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' }]
+            }] } });
+
+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.control = computed(() => this.group()?.get(this.config().controlName), ...(ngDevMode ? [{ debugName: "control" }] : []));
+        this.valueChanges = new EventEmitter();
+        this.value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        effect(() => {
+            this.setControlValue(this.value());
+        });
+    }
+    ngOnInit() {
+        this.control().valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+            this.valueChanges.emit(value);
+        });
+        // this.setControlValue(this.value);
+        // setTimeouts are ugly but this seems to be the only way to get the computed field to compute initial values
+        setTimeout(() => {
+            this.control().updateValueAndValidity();
+        });
+    }
+    setControlValue(value) {
+        if (value && this.control() && this.config().controlType !== ControlType.SUB_GROUP) {
+            this.control().setValue(value);
+        }
+    }
+    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 }); }
+}
+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: [{
+                type: Output
+            }], inputValue: [{
+                type: Input,
+                args: [{ alias: 'value' }]
+            }] } });
+
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-class AbstractAutocompleteComponent extends AbstractAutocompleteFieldMixin {
+class AbstractAutocompleteComponent extends CrisprControlComponent {
     constructor() {
         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" }] : []));
     }
     ngOnInit() {
         super.ngOnInit();
-        this.group.addControl(this.config.controlName, new FormControl());
-        // filter options by the search string using either the default filter function or one passed in through config
+        this.group().addControl(this.config().controlName, new FormControl());
+        // filter options by the search string using either the default filter function or one passed in through config()
         this.options$ = this.autocompleteInputControl.valueChanges.pipe(
         // this is needed to have the options panel to open on focus
-        startWith(''), debounceTime(this.config.typeDebounceTime), map((searchText) => typeof searchText === 'string' ? searchText?.trim() : ''), distinctUntilChanged(), switchMap((searchText) => observablifyOptions(this.config.options, this.group, searchText)), shareReplay(1));
+        startWith(''), debounceTime(this.config().typeDebounceTime), map((searchText) => typeof searchText === 'string' ? searchText?.trim() : ''), distinctUntilChanged(), switchMap((searchText) => observablifyOptions(this.config().options, this.group(), searchText)), shareReplay(1));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: AbstractAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.3", type: AbstractAutocompleteComponent, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AbstractAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: AbstractAutocompleteComponent, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: AbstractAutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AbstractAutocompleteComponent, decorators: [{
             type: Directive
         }] });
 
-const CrisprDisplayFieldMixin = crisprControlMixin(CrisprFieldComponent);
 // eslint-disable-next-line @angular-eslint/directive-class-suffix
-class CrisprDisplayFieldComponent extends CrisprDisplayFieldMixin {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprDisplayFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.3", type: CrisprDisplayFieldComponent, usesInheritance: true, ngImport: i0 }); }
+class CrisprDisplayFieldComponent extends CrisprControlComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprDisplayFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: CrisprDisplayFieldComponent, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprDisplayFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprDisplayFieldComponent, decorators: [{
             type: Directive
         }] });
 
 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-CAFXSHea.mjs').then(({ ButtonComponent }) => ButtonComponent),
-    input: () => import('./tft-crispr-forms-index-kJUZksiq.mjs').then(({ InputFieldComponent }) => InputFieldComponent),
-    select: () => import('./tft-crispr-forms-index-xbMIxY3P.mjs').then(({ SelectFieldComponent }) => SelectFieldComponent),
-    radio: () => import('./tft-crispr-forms-index-DseuVavm.mjs').then(({ RadioFieldComponent }) => RadioFieldComponent),
-    autocomplete: () => import('./tft-crispr-forms-index-DkkAr7Yr.mjs').then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
-    autocompleteChiplist: () => import('./tft-crispr-forms-index-cdo59qhx.mjs').then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
-    map: () => import('./tft-crispr-forms-index-DiNlBPaX.mjs').then(({ MapFieldComponent }) => MapFieldComponent),
-    textarea: () => import('./tft-crispr-forms-index-De3tRDbo.mjs').then(({ TextareaFieldComponent }) => TextareaFieldComponent),
-    checkbox: () => import('./tft-crispr-forms-index-T4Ook6pV.mjs').then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
-    slider: () => import('./tft-crispr-forms-index-BHUGuVwS.mjs').then(({ SliderFieldComponent }) => SliderFieldComponent),
-    datepicker: () => import('./tft-crispr-forms-index-CvnyvJJ_.mjs').then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
+    button: () => import('./tft-crispr-forms-index-joNvlmny.mjs').then(({ ButtonComponent }) => ButtonComponent),
+    input: () => import('./tft-crispr-forms-index-UvEVbwnf.mjs').then(({ InputFieldComponent }) => InputFieldComponent),
+    select: () => import('./tft-crispr-forms-index-LX0Bvkjk.mjs').then(({ SelectFieldComponent }) => SelectFieldComponent),
+    radio: () => import('./tft-crispr-forms-index-BQFuEW6x.mjs').then(({ RadioFieldComponent }) => RadioFieldComponent),
+    autocomplete: () => import('./tft-crispr-forms-index-BWsxn34Q.mjs').then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
+    autocompleteChiplist: () => import('./tft-crispr-forms-index-ClPQl_5D.mjs').then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
+    map: () => import('./tft-crispr-forms-index-DCRLl0jR.mjs').then(({ MapFieldComponent }) => MapFieldComponent),
+    textarea: () => import('./tft-crispr-forms-index-Dx-HIAiX.mjs').then(({ TextareaFieldComponent }) => TextareaFieldComponent),
+    checkbox: () => import('./tft-crispr-forms-index-Bh8kDfe4.mjs').then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
+    slider: () => import('./tft-crispr-forms-index-BHv9E1Y2.mjs').then(({ SliderFieldComponent }) => SliderFieldComponent),
+    datepicker: () => import('./tft-crispr-forms-index-BIhGbdgn.mjs').then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
     fileUpload: () => Promise.resolve().then(function () { return index$3; }).then(({ FileUploadFieldComponent }) => FileUploadFieldComponent),
-    imageUpload: () => import('./tft-crispr-forms-index-DKwMd-o-.mjs').then(({ ImageUploadFieldComponent }) => ImageUploadFieldComponent),
+    imageUpload: () => import('./tft-crispr-forms-index-C9gYJRzb.mjs').then(({ ImageUploadFieldComponent }) => ImageUploadFieldComponent),
     heading: () => Promise.resolve().then(function () { return index$2; }).then(({ HeadingComponent }) => HeadingComponent),
-    divider: () => import('./tft-crispr-forms-index-3_zzaLSn.mjs').then(({ DividerComponent }) => DividerComponent),
-    unitConversion: () => import('./tft-crispr-forms-index-CN1GmYGC.mjs').then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent),
+    divider: () => import('./tft-crispr-forms-index-kjMTlZoq.mjs').then(({ DividerComponent }) => DividerComponent),
+    unitConversion: () => import('./tft-crispr-forms-index-Dyx5SqHu.mjs').then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent),
 };
 function isControlComponent(component) {
-    return component && isControlConfig(component.config) && 'value' in component; // || component.config.controlType === ControlType.BUTTON;
+    return component && isControlConfig(component.config()) && 'value' in component;
 }
 function isControlOrButtonComponent(component) {
     return (isControlComponent(component) ||
-        component.config.controlType === ControlType.BUTTON);
+        component.config().controlType === ControlType.BUTTON);
 }
 
 class CrisprFieldDirective {
@@ -338,9 +374,9 @@ class CrisprFieldDirective {
             (await FIELD_COMPONENTS[this.config.controlType]());
         const componentRef = this.container.createComponent(component);
         this.component = componentRef.instance;
-        this.component.config = this.config;
+        this.component.config.set(this.config);
         if (isControlOrButtonComponent(this.component)) {
-            this.component.group = this.group;
+            componentRef.setInput('group', this.group);
         }
         this.updateComponentValue(this.value);
         // adds any config classes to the dynamically generated component
@@ -359,15 +395,15 @@ class CrisprFieldDirective {
     }
     updateComponentValue(value) {
         if (isControlComponent(this.component)) {
-            this.component.value = value;
+            this.component.value.set(value);
             // SubGroups won't populate without this detectChanges
             this.cdr.detectChanges();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.3", type: CrisprFieldDirective, isStandalone: true, selector: "[crisprField]", inputs: { config: "config", group: "group", value: "value" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], 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", value: "value" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[crisprField]',
@@ -388,22 +424,23 @@ class InitialControlValuePipe {
             ? initialFormValue[fieldConfig.controlName] || null
             : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: InitialControlValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.3", ngImport: i0, type: InitialControlValuePipe, name: "initialControlValue" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InitialControlValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.6", ngImport: i0, type: InitialControlValuePipe, isStandalone: false, name: "initialControlValue" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: InitialControlValuePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InitialControlValuePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'initialControlValue',
+                    standalone: false
                 }]
         }] });
 
 class CrisprPipesModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.3", ngImport: i0, type: CrisprPipesModule, declarations: [InitialControlValuePipe], imports: [CommonModule], exports: [InitialControlValuePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprPipesModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.6", ngImport: i0, type: CrisprPipesModule, declarations: [InitialControlValuePipe], imports: [CommonModule], exports: [InitialControlValuePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprPipesModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprPipesModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprPipesModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -438,18 +475,18 @@ class CrisprFormComponent {
     triggerSubmit() {
         this.submitTrigger.nativeElement.click();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", 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  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\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\" 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i7.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { kind: "directive", type: i7.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true }); }
+    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\" 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", "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-form', standalone: true, imports: [
+            args: [{ selector: 'crispr-form', 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  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\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\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]
+                    ], 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\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], form: [{
@@ -484,10 +521,10 @@ class FileDropzoneDirective {
             $event.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: FileDropzoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.3", type: FileDropzoneDirective, isStandalone: true, selector: "[crisprFileDropzone]", inputs: { crisprFileDropzone: "crisprFileDropzone" }, outputs: { fileDrop: "fileDrop" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FileDropzoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: FileDropzoneDirective, isStandalone: true, selector: "[crisprFileDropzone]", inputs: { crisprFileDropzone: "crisprFileDropzone" }, outputs: { fileDrop: "fileDrop" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: FileDropzoneDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FileDropzoneDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[crisprFileDropzone]',
@@ -506,16 +543,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
             }] } });
 
 class InfoComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: InfoComponent, isStandalone: true, selector: "crispr-info", inputs: { info: "info" }, ngImport: i0, template: "<mat-icon\n  *ngIf=\"info\"\n  [matTooltip]=\"info.content\"\n  [matTooltipPosition]=\"info.tooltipPosition || 'below'\">\n  {{info.iconName || 'info'}}\n</mat-icon>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+    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: [""], 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: "18.1.3", ngImport: i0, type: InfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-info', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        CommonModule,
+            args: [{ selector: 'crispr-info', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatIconModule,
                         MatTooltipModule
-                    ], template: "<mat-icon\n  *ngIf=\"info\"\n  [matTooltip]=\"info.content\"\n  [matTooltipPosition]=\"info.tooltipPosition || 'below'\">\n  {{info.iconName || 'info'}}\n</mat-icon>\n" }]
+                    ], template: "@if (info) {\n  <mat-icon\n    [matTooltip]=\"info.content\"\n    [matTooltipPosition]=\"info.tooltipPosition || 'below'\">\n    {{info.iconName || 'info'}}\n  </mat-icon>\n}\n" }]
         }], propDecorators: { info: [{
                 type: Input
             }] } });
@@ -528,15 +564,13 @@ class HeadingComponent extends CrisprFieldComponent {
         super(...arguments);
         this.defaultConfig = defaultConfig$1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: HeadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: HeadingComponent, isStandalone: true, selector: "crispr-heading", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: "  <label\n    *ngIf=\"!!config?.label\"\n    [ngClass]=\"config.typographyClass\">\n    {{ config.label }}\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n  </label>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i3$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: HeadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: HeadingComponent, isStandalone: true, selector: "crispr-heading", usesInheritance: true, ngImport: i0, template: "@if (!!config()?.label) {\n  <label\n    [ngClass]=\"config().typographyClass\">\n    {{ config().label }}\n    @if (config().info) {\n      <crispr-info\n        matSuffix\n        [info]=\"config().info\">\n      </crispr-info>\n    }\n  </label>\n}\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: HeadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: HeadingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-heading', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatFormFieldModule, InfoComponent], template: "  <label\n    *ngIf=\"!!config?.label\"\n    [ngClass]=\"config.typographyClass\">\n    {{ config.label }}\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n  </label>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'crispr-heading', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatFormFieldModule, InfoComponent], standalone: true, template: "@if (!!config()?.label) {\n  <label\n    [ngClass]=\"config().typographyClass\">\n    {{ config().label }}\n    @if (config().info) {\n      <crispr-info\n        matSuffix\n        [info]=\"config().info\">\n      </crispr-info>\n    }\n  </label>\n}\n", styles: [":host{display:block}\n"] }]
+        }] });
 
 class FieldContainerComponent {
     constructor() {
@@ -575,12 +609,12 @@ class FieldContainerComponent {
             tap((shouldDisable) => shouldDisable ? control.disable() : control.enable()))
             : of(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: FieldContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: FieldContainerComponent, isStandalone: true, selector: "crispr-field-container", inputs: { config: "config", group: "group", inlineField: "inlineField" }, ngImport: i0, template: "<div\n  *ngIf=\"(disabled$ | async) ? !config.hideDisabled : true\"\n  [ngClass]=\"config.classes\"\n  [class.inline-field]=\"inlineField\"\n  class=\"field-container\">\n\n  <crispr-heading\n    *ngIf=\"config.heading\"\n    [config]=\"config.heading\">\n  </crispr-heading>\n\n  <ng-content>\n  </ng-content>\n\n</div>\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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: HeadingComponent, selector: "crispr-heading", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: FieldContainerComponent, decorators: [{
+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, standalone: true, imports: [CommonModule, HeadingComponent], template: "<div\n  *ngIf=\"(disabled$ | async) ? !config.hideDisabled : true\"\n  [ngClass]=\"config.classes\"\n  [class.inline-field]=\"inlineField\"\n  class=\"field-container\">\n\n  <crispr-heading\n    *ngIf=\"config.heading\"\n    [config]=\"config.heading\">\n  </crispr-heading>\n\n  <ng-content>\n  </ng-content>\n\n</div>\n", styles: ["::ng-deep mat-form-field.mat-mdc-form-field{display:block;padding:.25em 0}.inline-field{display:inline-block}\n"] }]
+            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: [{
@@ -590,15 +624,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
             }] } });
 
 class SelectedFileComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: SelectedFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", 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<mat-progress-bar\n  *ngIf=\"showProgress\"\n  mode=\"determinate\"\n  [color]=\"color\"\n  [value]=\"progress\">\n</mat-progress-bar>\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i2$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], preserveWhitespaces: true }); }
+    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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: SelectedFileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SelectedFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-selected-file', standalone: true, imports: [
-                        CommonModule,
+            args: [{ selector: 'crispr-selected-file', imports: [
                         MatProgressBarModule
-                    ], template: "<h3 class=\"mat-h3\">{{ fileName }}</h3>\n<mat-progress-bar\n  *ngIf=\"showProgress\"\n  mode=\"determinate\"\n  [color]=\"color\"\n  [value]=\"progress\">\n</mat-progress-bar>\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"] }]
+                    ], 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: [{
@@ -610,8 +643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
             }] } });
 
 /* eslint-disable @nx/enforce-module-boundaries */
-const FileUploadFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class FileUploadFieldComponent extends FileUploadFieldMixin {
+class FileUploadFieldComponent extends CrisprControlComponent {
     // ngControl: NgControl = null;
     constructor(ngControl) {
         super();
@@ -629,6 +661,8 @@ class FileUploadFieldComponent extends FileUploadFieldMixin {
             showUploadProgress: false,
             disableOnUpload: true,
         };
+        this.selectedFiles = signal(null, ...(ngDevMode ? [{ debugName: "selectedFiles" }] : []));
+        this.selectedFilesArray = computed(() => Array.from(this.selectedFiles()), ...(ngDevMode ? [{ debugName: "selectedFilesArray" }] : []));
         this.isUploaded = false;
         this.fileProgress = [];
         if (this.ngControl != null) {
@@ -639,25 +673,25 @@ class FileUploadFieldComponent extends FileUploadFieldMixin {
     }
     ngOnInit() {
         super.ngOnInit();
-        this.disabled$ = this.config.disabledCallback
-            ? this.config.disabledCallback(this.group)
+        this.disabled$ = this.config().disabledCallback
+            ? this.config().disabledCallback(this.group())
             : of(false);
     }
     filesChanged(files) {
         if (files && files.length > 0) {
-            this.selectedFiles = files;
-            this.control.patchValue(files);
+            this.selectedFiles.set(files);
+            this.control().patchValue(files);
         }
     }
     uploadFiles() {
-        if (this.selectedFiles && this.config.uploadFiles) {
+        if (this.selectedFiles() && this.config().uploadFiles) {
             this.isUploaded = true;
-            this.config.uploadFiles(this.group, this.selectedFiles, this);
+            this.config().uploadFiles(this.group(), this.selectedFiles(), this);
         }
     }
     resetFileInput() {
         this.fileInputRef.nativeElement.value = '';
-        this.control.patchValue(null);
+        this.control().patchValue(null);
         this.isUploaded = false;
     }
     writeValue(value) {
@@ -669,12 +703,12 @@ class FileUploadFieldComponent extends FileUploadFieldMixin {
         this.onChange = fn;
     }
     registerOnTouched(fn) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: FileUploadFieldComponent, deps: [{ token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: FileUploadFieldComponent, isStandalone: true, selector: "crispr-file-upload-field", viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field floatLabel=\"always\"\n    [color]=\"config.color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config.disableOnUpload && isUploaded)\"\n    [formGroup]=\"group\"\n    (fileDrop)=\"filesChanged($event)\">\n\n    <input [formControlName]=\"config.controlName\" matInput type=\"text\"/>\n    <input\n      #fileInput\n      type=\"file\"\n      style=\"display: none\"\n      [accept]=\"config.acceptedTypes\"\n      [multiple]=\"config.allowMultipleFiles\"\n      (change)=\"filesChanged($event.target.files)\"/>\n    <mat-label>{{config.label}}</mat-label>\n\n    <div *ngIf=\"!(selectedFiles?.length > 0); else selectedFileList\"  class=\"drop-info\">\n      <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n      <h2 class=\"mat-h2\">{{config.dropZoneText}}</h2>\n      or\n      <button\n        mat-raised-button\n        type=\"button\"\n        color=\"primary\"\n        [disabled]=\"(disabled$ | async) || config.disableOnUpload && isUploaded\"\n        (click)=\"fileInput.click()\"\n        [attr.aria-label]=\"config.controlName\">\n        {{config.selectButtonText}}\n      </button>\n    </div>\n    <ng-template #selectedFileList>\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          <crispr-selected-file\n            *ngFor=\"let file of selectedFiles; let i = index;\"\n            [color]=\"config.color === 'primary' ? 'accent' : 'primary'\"\n            [fileName]=\"file.name\"\n            [showProgress]=\"config.showUploadProgress\"\n            [progress]=\"fileProgress && (fileProgress[i] | async)\">\n          </crispr-selected-file>\n        </div>\n\n      </div>\n    </ng-template>\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n  </mat-form-field>\n  <div class=\"button-container\" *ngIf=\"selectedFiles?.length > 0\">\n\n    <button\n      mat-button\n      (click)=\"resetFileInput()\"\n      type=\"button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      aria-label=\"Remove Selected File(s)\">\n      {{config.clearFilesButtonText}}\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"!!config.uploadFiles\"\n      mat-raised-button\n      type=\"button\"\n      color=\"accent\"\n      class=\"file-input-button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      (click)=\"uploadFiles()\"\n      [attr.aria-label]=\"config.uploadButtonText\">\n      {{ config.uploadButtonText }}\n    </button>\n\n  </div>\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:0;display:flex;justify-content:center}:host .drop-info{display:flex;flex-direction:column;align-items:center}:host .drop-info .drop-icon{font-size:36px}:host .drop-info .mat-h2{margin:0}:host .button-container{display:flex;justify-content:flex-end;margin-top:-16px}:host .button-container button{margin-left:8px}:host .selected-files-container{width:100%}:host [matInput]{position:absolute;max-height:0;visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: SelectedFileComponent, selector: "crispr-selected-file", inputs: ["fileName", "progress", "showProgress", "color"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i7.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i7.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: FileDropzoneDirective, selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FileUploadFieldComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: FileUploadFieldComponent, isStandalone: true, selector: "crispr-file-upload-field", viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  <mat-form-field floatLabel=\"always\"\n    [color]=\"config().color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config().disableOnUpload && isUploaded)\"\n    [formGroup]=\"group()\"\n    (fileDrop)=\"filesChanged($event)\">\n\n    <input [formControlName]=\"config().controlName\" matInput type=\"text\"/>\n    <input\n      #fileInput\n      type=\"file\"\n      style=\"display: none\"\n      [accept]=\"config().acceptedTypes\"\n      [multiple]=\"config().allowMultipleFiles\"\n      (change)=\"filesChanged($event.target.files)\"/>\n    <mat-label>{{config().label}}</mat-label>\n\n    @if ((selectedFiles()?.length === 0)) {\n      <div  class=\"drop-info\">\n        <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n        <h2 class=\"mat-h2\">{{config().dropZoneText}}</h2>\n        or\n        <button\n          mat-raised-button\n          type=\"button\"\n          color=\"primary\"\n          [disabled]=\"(disabled$ | async) || config().disableOnUpload && isUploaded\"\n          (click)=\"fileInput.click()\"\n          [attr.aria-label]=\"config().controlName\">\n          {{config().selectButtonText}}\n        </button>\n      </div>\n    } @else {\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          @for (file of selectedFilesArray(); track file; let i = $index) {\n            <crispr-selected-file\n              [color]=\"config().color === 'primary' ? 'accent' : 'primary'\"\n              [fileName]=\"file.name\"\n              [showProgress]=\"config().showUploadProgress\"\n              [progress]=\"fileProgress && (fileProgress[i] | async)\">\n            </crispr-selected-file>\n          }\n        </div>\n      </div>\n    }\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n  </mat-form-field>\n  @if ((selectedFiles())?.length > 0) {\n    <div class=\"button-container\">\n      <button\n        mat-button\n        (click)=\"resetFileInput()\"\n        type=\"button\"\n        [disabled]=\"(disabled$ | async) || (config().disableOnUpload && isUploaded)\"\n        aria-label=\"Remove Selected File(s)\">\n        {{config().clearFilesButtonText}}\n        <mat-icon>delete</mat-icon>\n      </button>\n      @if (!!config().uploadFiles) {\n        <button\n          mat-raised-button\n          type=\"button\"\n          color=\"accent\"\n          class=\"file-input-button\"\n          [disabled]=\"(disabled$ | async) || (config().disableOnUpload && isUploaded)\"\n          (click)=\"uploadFiles()\"\n          [attr.aria-label]=\"config().uploadButtonText\">\n          {{ config().uploadButtonText }}\n        </button>\n      }\n    </div>\n  }\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:0;display:flex;justify-content:center}:host .drop-info{display:flex;flex-direction:column;align-items:center}:host .drop-info .drop-icon{font-size:36px}:host .drop-info .mat-h2{margin:0}:host .button-container{display:flex;justify-content:flex-end;margin-top:-16px}:host .button-container button{margin-left:8px}:host .selected-files-container{width:100%}:host [matInput]{position:absolute;max-height:0;visibility:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: SelectedFileComponent, selector: "crispr-selected-file", inputs: ["fileName", "progress", "showProgress", "color"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: FileDropzoneDirective, selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: FileUploadFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FileUploadFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-file-upload-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: 'crispr-file-upload-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CommonModule,
                         FieldContainerComponent,
                         ReactiveFormsModule,
@@ -685,8 +719,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
                         SelectedFileComponent,
                         FormValidationHandlerModule,
                         FileDropzoneDirective,
-                    ], template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field floatLabel=\"always\"\n    [color]=\"config.color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config.disableOnUpload && isUploaded)\"\n    [formGroup]=\"group\"\n    (fileDrop)=\"filesChanged($event)\">\n\n    <input [formControlName]=\"config.controlName\" matInput type=\"text\"/>\n    <input\n      #fileInput\n      type=\"file\"\n      style=\"display: none\"\n      [accept]=\"config.acceptedTypes\"\n      [multiple]=\"config.allowMultipleFiles\"\n      (change)=\"filesChanged($event.target.files)\"/>\n    <mat-label>{{config.label}}</mat-label>\n\n    <div *ngIf=\"!(selectedFiles?.length > 0); else selectedFileList\"  class=\"drop-info\">\n      <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n      <h2 class=\"mat-h2\">{{config.dropZoneText}}</h2>\n      or\n      <button\n        mat-raised-button\n        type=\"button\"\n        color=\"primary\"\n        [disabled]=\"(disabled$ | async) || config.disableOnUpload && isUploaded\"\n        (click)=\"fileInput.click()\"\n        [attr.aria-label]=\"config.controlName\">\n        {{config.selectButtonText}}\n      </button>\n    </div>\n    <ng-template #selectedFileList>\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          <crispr-selected-file\n            *ngFor=\"let file of selectedFiles; let i = index;\"\n            [color]=\"config.color === 'primary' ? 'accent' : 'primary'\"\n            [fileName]=\"file.name\"\n            [showProgress]=\"config.showUploadProgress\"\n            [progress]=\"fileProgress && (fileProgress[i] | async)\">\n          </crispr-selected-file>\n        </div>\n\n      </div>\n    </ng-template>\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n  </mat-form-field>\n  <div class=\"button-container\" *ngIf=\"selectedFiles?.length > 0\">\n\n    <button\n      mat-button\n      (click)=\"resetFileInput()\"\n      type=\"button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      aria-label=\"Remove Selected File(s)\">\n      {{config.clearFilesButtonText}}\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"!!config.uploadFiles\"\n      mat-raised-button\n      type=\"button\"\n      color=\"accent\"\n      class=\"file-input-button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      (click)=\"uploadFiles()\"\n      [attr.aria-label]=\"config.uploadButtonText\">\n      {{ config.uploadButtonText }}\n    </button>\n\n  </div>\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:0;display:flex;justify-content:center}:host .drop-info{display:flex;flex-direction:column;align-items:center}:host .drop-info .drop-icon{font-size:36px}:host .drop-info .mat-h2{margin:0}:host .button-container{display:flex;justify-content:flex-end;margin-top:-16px}:host .button-container button{margin-left:8px}:host .selected-files-container{width:100%}:host [matInput]{position:absolute;max-height:0;visibility:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i2.NgControl, decorators: [{
+                    ], standalone: true, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  <mat-form-field floatLabel=\"always\"\n    [color]=\"config().color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config().disableOnUpload && isUploaded)\"\n    [formGroup]=\"group()\"\n    (fileDrop)=\"filesChanged($event)\">\n\n    <input [formControlName]=\"config().controlName\" matInput type=\"text\"/>\n    <input\n      #fileInput\n      type=\"file\"\n      style=\"display: none\"\n      [accept]=\"config().acceptedTypes\"\n      [multiple]=\"config().allowMultipleFiles\"\n      (change)=\"filesChanged($event.target.files)\"/>\n    <mat-label>{{config().label}}</mat-label>\n\n    @if ((selectedFiles()?.length === 0)) {\n      <div  class=\"drop-info\">\n        <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n        <h2 class=\"mat-h2\">{{config().dropZoneText}}</h2>\n        or\n        <button\n          mat-raised-button\n          type=\"button\"\n          color=\"primary\"\n          [disabled]=\"(disabled$ | async) || config().disableOnUpload && isUploaded\"\n          (click)=\"fileInput.click()\"\n          [attr.aria-label]=\"config().controlName\">\n          {{config().selectButtonText}}\n        </button>\n      </div>\n    } @else {\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          @for (file of selectedFilesArray(); track file; let i = $index) {\n            <crispr-selected-file\n              [color]=\"config().color === 'primary' ? 'accent' : 'primary'\"\n              [fileName]=\"file.name\"\n              [showProgress]=\"config().showUploadProgress\"\n              [progress]=\"fileProgress && (fileProgress[i] | async)\">\n            </crispr-selected-file>\n          }\n        </div>\n      </div>\n    }\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n  </mat-form-field>\n  @if ((selectedFiles())?.length > 0) {\n    <div class=\"button-container\">\n      <button\n        mat-button\n        (click)=\"resetFileInput()\"\n        type=\"button\"\n        [disabled]=\"(disabled$ | async) || (config().disableOnUpload && isUploaded)\"\n        aria-label=\"Remove Selected File(s)\">\n        {{config().clearFilesButtonText}}\n        <mat-icon>delete</mat-icon>\n      </button>\n      @if (!!config().uploadFiles) {\n        <button\n          mat-raised-button\n          type=\"button\"\n          color=\"accent\"\n          class=\"file-input-button\"\n          [disabled]=\"(disabled$ | async) || (config().disableOnUpload && isUploaded)\"\n          (click)=\"uploadFiles()\"\n          [attr.aria-label]=\"config().uploadButtonText\">\n          {{ config().uploadButtonText }}\n        </button>\n      }\n    </div>\n  }\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:0;display:flex;justify-content:center}:host .drop-info{display:flex;flex-direction:column;align-items:center}:host .drop-info .drop-icon{font-size:36px}:host .drop-info .mat-h2{margin:0}:host .button-container{display:flex;justify-content:flex-end;margin-top:-16px}:host .button-container button{margin-left:8px}:host .selected-files-container{width:100%}:host [matInput]{position:absolute;max-height:0;visibility:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.NgControl, decorators: [{
                     type: Optional
                 }, {
                     type: Self
@@ -740,10 +774,10 @@ class CrisprDisplayFieldDirective {
         this.componentInstance.value = value;
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprDisplayFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.3", type: CrisprDisplayFieldDirective, isStandalone: true, selector: "[crisprDisplayField]", inputs: { group: "group", value: "value", component: "component", index: "index" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprDisplayFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprDisplayFieldDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprDisplayFieldDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[crisprDisplayField]',
@@ -763,8 +797,7 @@ const defaultConfig = {
     addButtonLabel: 'ADD ITEM',
     minListLength: 1,
 };
-const FormGroupListMixin = crisprControlMixin(CrisprFieldComponent);
-class FormGroupListComponent extends FormGroupListMixin {
+class FormGroupListComponent extends CrisprControlComponent {
     constructor(cdr) {
         super();
         this.cdr = cdr;
@@ -781,16 +814,16 @@ class FormGroupListComponent extends FormGroupListMixin {
         // TODO: this is required to ngFor of controls in template, must be a better way
     }
     setControlValue(values) {
-        if (this.control) {
+        if (this.control()) {
             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 = this.control().value;
                 if (currentValues.length) {
-                    this.control.clear();
+                    this.control().clear();
                 }
                 values.forEach((value) => this.addGroup(value));
             }
-            else if (this.config.displayInitialItem) {
+            else if (this.config().displayInitialItem) {
                 this.addGroup();
             }
             // needed to ensure new array items render
@@ -808,25 +841,24 @@ class FormGroupListComponent extends FormGroupListMixin {
         this.addGroup();
     }
     addGroup(value = null) {
-        this.control.push(createControlForType(this.config.itemConfig, value));
+        this.control().push(createControlForType(this.config().itemConfig, value));
         // needed to ensure new array items render
         setTimeout(() => {
             this.cdr.detectChanges();
         });
     }
     deleteGroup(index) {
-        this.control.removeAt(index);
+        this.control().removeAt(index);
     }
     clickEditItem(index) {
         this.selectedIndex = index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: FormGroupListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: FormGroupListComponent, isStandalone: true, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <ng-container *ngFor=\"let itemControl of control?.controls; let i = index; let last = last\">\n      <ng-container *ngIf=\"!config.displayItemComponent || i === selectedIndex || (last && selectedIndex ?? true); else display\">\n        <!-- TODO: use content projection to allow custom item label component -->\n        <div  class=\"item-header\">\n          <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n          <button\n            mat-icon-button\n            type=\"button\"\n            *ngIf=\"i + 1 > config.minListLength\">\n            <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n          </button>\n        </div>\n        <div\n          [formGroup]=\"itemControl\">\n          <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n          <ng-container\n            *ngFor=\"let field of config.itemConfig.fields;\"\n            crisprField\n            [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n            [config]=\"field\"\n            [group]=\"itemControl\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #display>\n        <div\n          class=\"display-field-container\"\n          crisprDisplayField\n          [component]=\"config.displayItemComponent\"\n          [value]=\"itemControl.value\"\n          [index]=\"i\">\n          <button mat-icon-button (click)=\"clickEditItem(i)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n      </ng-template>\n    </ng-container>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"clickAdd()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}.display-field-container{position:relative}.display-field-container button{position:absolute;top:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "directive", type: CrisprDisplayFieldDirective, selector: "[crisprDisplayField]", inputs: ["group", "value", "component", "index"] }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i7.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FormGroupListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: FormGroupListComponent, isStandalone: true, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config\" [group]=\"group()\" [formGroup]=\"group()\">\n\n  <div [formArrayName]=\"config().controlName\">\n\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    @for (itemControl of control()?.controls; track itemControl; let i = $index; let last = $last) {\n    @if (!config().displayItemComponent || i === selectedIndex || (last && selectedIndex ?? true)) {\n    <!-- TODO: use content projection to allow custom item label component -->\n    <div class=\"item-header\">\n      <span class=\"mat-h2\"> {{ config().itemLabelBuilder ? config().itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n      @if (i + 1 > config().minListLength) {\n      <button mat-icon-button type=\"button\">\n        <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n      </button>\n      }\n    </div>\n    <div [formGroup]=\"itemControl\">\n      <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n      @for (field of config().itemConfig.fields; track field) {\n      <ng-container crisprField [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n        [config]=\"field\" [group]=\"itemControl\">\n      </ng-container>\n      }\n    </div>\n    } @else {\n    <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n      [value]=\"itemControl.value\" [index]=\"i\">\n      <button mat-icon-button (click)=\"clickEditItem(i)\">\n        <mat-icon>edit</mat-icon>\n      </button>\n    </div>\n    }\n    <ng-template #display>\n      <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n        [value]=\"itemControl.value\" [index]=\"i\">\n        <button mat-icon-button (click)=\"clickEditItem(i)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </ng-template>\n    }\n  </div>\n  <div class=\"group-footer\">\n    <button type=\"button\" class=\"add\" mat-raised-button [color]=\"config().addButtonColor\" (click)=\"clickAdd()\">\n      {{config().addItemLabel || config().addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}.display-field-container{position:relative}.display-field-container button{position:absolute;top:0;right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "directive", type: CrisprDisplayFieldDirective, selector: "[crisprDisplayField]", inputs: ["group", "value", "component", "index"] }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i6.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: FormGroupListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FormGroupListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-form-group-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        CommonModule,
+            args: [{ selector: 'crispr-form-group-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatButtonModule,
                         MatIconModule,
                         FieldContainerComponent,
@@ -834,8 +866,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
                         CrisprFieldDirective,
                         CrisprDisplayFieldDirective,
                         CrisprPipesModule,
-                        FormValidationHandlerModule,
-                    ], template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <ng-container *ngFor=\"let itemControl of control?.controls; let i = index; let last = last\">\n      <ng-container *ngIf=\"!config.displayItemComponent || i === selectedIndex || (last && selectedIndex ?? true); else display\">\n        <!-- TODO: use content projection to allow custom item label component -->\n        <div  class=\"item-header\">\n          <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n          <button\n            mat-icon-button\n            type=\"button\"\n            *ngIf=\"i + 1 > config.minListLength\">\n            <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n          </button>\n        </div>\n        <div\n          [formGroup]=\"itemControl\">\n          <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n          <ng-container\n            *ngFor=\"let field of config.itemConfig.fields;\"\n            crisprField\n            [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n            [config]=\"field\"\n            [group]=\"itemControl\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #display>\n        <div\n          class=\"display-field-container\"\n          crisprDisplayField\n          [component]=\"config.displayItemComponent\"\n          [value]=\"itemControl.value\"\n          [index]=\"i\">\n          <button mat-icon-button (click)=\"clickEditItem(i)\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n      </ng-template>\n    </ng-container>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"clickAdd()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}.display-field-container{position:relative}.display-field-container button{position:absolute;top:0;right:0}\n"] }]
+                        FormValidationHandlerModule
+                    ], standalone: true, template: "<crispr-field-container [config]=\"config\" [group]=\"group()\" [formGroup]=\"group()\">\n\n  <div [formArrayName]=\"config().controlName\">\n\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    @for (itemControl of control()?.controls; track itemControl; let i = $index; let last = $last) {\n    @if (!config().displayItemComponent || i === selectedIndex || (last && selectedIndex ?? true)) {\n    <!-- TODO: use content projection to allow custom item label component -->\n    <div class=\"item-header\">\n      <span class=\"mat-h2\"> {{ config().itemLabelBuilder ? config().itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n      @if (i + 1 > config().minListLength) {\n      <button mat-icon-button type=\"button\">\n        <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n      </button>\n      }\n    </div>\n    <div [formGroup]=\"itemControl\">\n      <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n      @for (field of config().itemConfig.fields; track field) {\n      <ng-container crisprField [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n        [config]=\"field\" [group]=\"itemControl\">\n      </ng-container>\n      }\n    </div>\n    } @else {\n    <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n      [value]=\"itemControl.value\" [index]=\"i\">\n      <button mat-icon-button (click)=\"clickEditItem(i)\">\n        <mat-icon>edit</mat-icon>\n      </button>\n    </div>\n    }\n    <ng-template #display>\n      <div class=\"display-field-container\" crisprDisplayField [component]=\"config().displayItemComponent\"\n        [value]=\"itemControl.value\" [index]=\"i\">\n        <button mat-icon-button (click)=\"clickEditItem(i)\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </ng-template>\n    }\n  </div>\n  <div class=\"group-footer\">\n    <button type=\"button\" class=\"add\" mat-raised-button [color]=\"config().addButtonColor\" (click)=\"clickAdd()\">\n      {{config().addItemLabel || config().addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}.display-field-container{position:relative}.display-field-container button{position:absolute;top:0;right:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
 
 var index$1 = /*#__PURE__*/Object.freeze({
@@ -843,34 +875,33 @@ var index$1 = /*#__PURE__*/Object.freeze({
     FormGroupListComponent: FormGroupListComponent
 });
 
-const FormGroupMixin = crisprControlMixin(CrisprFieldComponent);
-class SubGroupComponent extends FormGroupMixin {
+class SubGroupComponent extends CrisprControlComponent {
     ngOnInit() {
         super.ngOnInit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: SubGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.3", type: SubGroupComponent, selector: "crispr-sub-group", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <ng-container\n    *ngFor=\"let fieldConfig of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : fieldConfig\"\n    [config]=\"fieldConfig\"\n    [group]=\"control\">\n  </ng-container>\n</crispr-field-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true }); }
+    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\n  [config]=\"config()\"\n  [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n    <ng-container\n      crisprField\n      [value]=\"value | initialControlValue : fieldConfig\"\n      [config]=\"fieldConfig\"\n      [group]=\"control\">\n    </ng-container>\n  }\n</crispr-field-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: SubGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-sub-group', template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <ng-container\n    *ngFor=\"let fieldConfig of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : fieldConfig\"\n    [config]=\"fieldConfig\"\n    [group]=\"control\">\n  </ng-container>\n</crispr-field-container>\n\n" }]
+            args: [{ selector: 'crispr-sub-group', standalone: false, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n    <ng-container\n      crisprField\n      [value]=\"value | initialControlValue : fieldConfig\"\n      [config]=\"fieldConfig\"\n      [group]=\"control\">\n    </ng-container>\n  }\n</crispr-field-container>\n\n" }]
         }] });
 
 class SubGroupModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: SubGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.3", ngImport: i0, type: SubGroupModule, declarations: [SubGroupComponent], imports: [CommonModule,
+    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: "18.1.3", ngImport: i0, type: SubGroupModule, imports: [CommonModule,
+    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] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: SubGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -897,8 +928,8 @@ var index = /*#__PURE__*/Object.freeze({
 });
 
 class CrisprFormsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.3", ngImport: i0, type: CrisprFormsModule, imports: [CommonModule,
+    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,
             ReactiveFormsModule,
             FormValidationHandlerModule,
             FormGroupListComponent,
@@ -908,7 +939,7 @@ class CrisprFormsModule {
             SubGroupModule,
             CrisprPipesModule,
             CrisprFormComponent], exports: [CrisprFormComponent, FieldContainerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprFormsModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormsModule, imports: [CommonModule,
             ReactiveFormsModule,
             FormValidationHandlerModule,
             FormGroupListComponent,
@@ -917,7 +948,7 @@ class CrisprFormsModule {
             CrisprPipesModule,
             CrisprFormComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: CrisprFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -940,5 +971,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractAutocompleteComponent, ControlType, CrisprDisplayFieldComponent, CrisprFieldComponent, CrisprFormComponent, CrisprFormsModule, DEFAULT_EMPTY_OPTIONS_MESSAGE, FieldContainerComponent, FileDropzoneDirective, FileUploadFieldComponent, HeadingComponent, InfoComponent, SelectedFileComponent, allowedFileExtValidator, allowedFileType, buildFormGroupFromConfig, callOptionsIfFunction, convertBytesToMb, createControlForType, crisprControlMixin, filterOptionsByLabel, isControlConfig, maxFileSizeValidator, observablifyOptions, valueIn };
+export { AbstractAutocompleteComponent, ControlType, CrisprControlComponent, CrisprDisplayFieldComponent, CrisprFieldComponent, CrisprFormComponent, CrisprFormsModule, DEFAULT_EMPTY_OPTIONS_MESSAGE, FieldContainerComponent, FileDropzoneDirective, FileUploadFieldComponent, HeadingComponent, InfoComponent, SelectedFileComponent, allowedFileExtValidator, allowedFileType, buildFormGroupFromConfig, callOptionsIfFunction, convertBytesToMb, createControlForType, filterOptionsByLabel, isControlConfig, maxFileSizeValidator, observablifyOptions, valueIn };
 //# sourceMappingURL=tft-crispr-forms.mjs.map