@tft/crispr-forms 21.0.18 → 21.1.0

package/fesm2022/tft-crispr-forms.mjs

@@ -1,2 +1,2072 @@
-export { A as AbstractAutocompleteComponent, d as ControlType, a as CrisprControlComponent, g as CrisprDisplayFieldComponent, C as CrisprFieldComponent, h as CrisprFormComponent, i as CrisprFormsModule, D as DEFAULT_EMPTY_OPTIONS_MESSAGE, F as FieldContainerComponent, f as FileDropzoneDirective, j as FileUploadFieldComponent, H as HeadingComponent, I as InfoComponent, S as SelectedFileComponent, k as allowedFileExtValidator, l as allowedFileType, b as buildFormGroupFromConfig, m as callOptionsIfFunction, e as convertBytesToMb, n as createControlForType, p as filterOptionsByLabel, q as isControlConfig, r as maxFileSizeValidator, o as observablifyOptions, v as valueIn } from './tft-crispr-forms-tft-crispr-forms-8liD7eof.mjs';
+import * as i0 from '@angular/core';
+import { input, computed, Directive, inject, DestroyRef, Injector, output, effect, afterNextRender, ViewContainerRef, Renderer2, Pipe, untracked, viewChild, ChangeDetectionStrategy, Component, HostListener, signal, NgModule } from '@angular/core';
+import { takeUntilDestroyed, outputFromObservable, toObservable, toSignal } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@angular/forms';
+import { FormArray, FormControl, FormGroup, ReactiveFormsModule, NgControl } from '@angular/forms';
+import { map, startWith, debounceTime, distinctUntilChanged, switchMap, shareReplay, tap, take } from 'rxjs/operators';
+import * as i1 from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
+import { from, of, isObservable, BehaviorSubject, combineLatest, Subject, Observable, concat, defer, filter, switchMap as switchMap$1, map as map$1, startWith as startWith$1, debounceTime as debounceTime$1 } from 'rxjs';
+import { ControlErrorContainerDirective, ControlErrorsFormDirective, ControlErrorsDirective } from '@tft/form-validation-handler';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule, MatButton } from '@angular/material/button';
+import * as i2$2 from '@angular/material/form-field';
+import { MatFormFieldModule, MatFormField, MatLabel } from '@angular/material/form-field';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3$1 from '@angular/material/input';
+import { MatInputModule, MatInput } from '@angular/material/input';
+import * as i2$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i1$2 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i2$3 from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import { ENTER } from '@angular/cdk/keycodes';
+import * as i2$5 from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import * as i5 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatOptionModule } from '@angular/material/core';
+import * as i1$3 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$4 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatDateFnsModule } from '@angular/material-date-fns-adapter';
+import * as i5$1 from '@angular/cdk/portal';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import * as i2$4 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import { DomSanitizer } from '@angular/platform-browser';
+import imageCompression from 'browser-image-compression';
+import { MapGeocoder, MapInfoWindow, GoogleMap, MapMarker } from '@angular/google-maps';
+import * as i2$6 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i3$2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i2$7 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+
+function valueIn(values) {
+    return map((value) => {
+        if (value) {
+            return values.some(v => {
+                if (isRegex(v)) {
+                    const trimmedStringForRegex = v.substr(1, v.length - 2);
+                    const regex = new RegExp(trimmedStringForRegex);
+                    return regex.test(value);
+                }
+                else {
+                    return v === value;
+                }
+            });
+        }
+        else {
+            return false;
+        }
+    });
+}
+function isRegex(string) {
+    return string.startsWith('/') && string.endsWith('/');
+}
+
+const DEFAULT_EMPTY_OPTIONS_MESSAGE = 'No Items';
+
+// export type ControlType = keyof typeof FIELD_COMPONENTS;
+var ControlType;
+(function (ControlType) {
+    ControlType["AUTOCOMPLETE"] = "autocomplete";
+    ControlType["AUTOCOMPLETE_CHIPLIST"] = "autocompleteChiplist";
+    ControlType["BUTTON"] = "button";
+    ControlType["CHECKBOX"] = "checkbox";
+    ControlType["CUSTOM"] = "custom";
+    ControlType["DATEPICKER"] = "datepicker";
+    ControlType["DIVIDER"] = "divider";
+    ControlType["FILE_UPLOAD"] = "fileUpload";
+    ControlType["GROUP_LIST"] = "groupList";
+    ControlType["HEADING"] = "heading";
+    ControlType["IMAGE_UPLOAD"] = "imageUpload";
+    ControlType["INPUT"] = "input";
+    ControlType["MAP"] = "map";
+    ControlType["RADIO"] = "radio";
+    ControlType["SELECT"] = "select";
+    ControlType["SLIDER"] = "slider";
+    ControlType["SUB_GROUP"] = "subGroup";
+    ControlType["TEXTAREA"] = "textarea";
+    ControlType["UNIT_CONVERSION"] = "unitConversion";
+})(ControlType || (ControlType = {}));
+
+/**
+ * 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.
+ * @param controlConfig the configuration object for the control to build
+ * @param value an initial value to use if passed in
+ */
+function createControlForType(controlConfig, value = null) {
+    // build form control out based on the control type
+    const control = controlConfig.controlType === ControlType.SUB_GROUP
+        ? buildFormGroupFromConfig(controlConfig, value)
+        : controlConfig.controlType === ControlType.GROUP_LIST
+            ? new FormArray([], controlConfig.validators)
+            : new FormControl(value || null, controlConfig.validators);
+    return control;
+}
+
+/**
+ * Determines if the field config is for a form control (not a divider, heading or other non-control field)
+ */
+function isControlConfig(fieldConfig) {
+    return 'controlName' in fieldConfig;
+}
+
+/**
+ * builds out form group based on config
+ * @param config a configuration for a form group
+ * @param value an object of initial values to pass in
+ * @param group the form group to modify and build out
+ */
+function buildFormGroupFromConfig(config, value = null, group = new FormGroup({})) {
+    config.fields.forEach((controlConfig) => {
+        if (isControlConfig(controlConfig)) {
+            // then add a control to the group using the controlName from configuration
+            const { controlName } = controlConfig;
+            if (group.get(controlName)) {
+                group.removeControl(controlName);
+            }
+            // if there's a value object and it has a non-null/undefined value for this field use it.
+            // Otherwise, default to null
+            const controlValue = (value && value[controlName]) ?? null;
+            const control = createControlForType(controlConfig, controlValue);
+            group.addControl(controlName, control);
+        }
+    });
+    group.setValidators(config.validators);
+    return group;
+}
+
+function callOptionsIfFunction(options, parentGroup, searchString) {
+    return options instanceof Function ? options(parentGroup, searchString) : options;
+}
+
+/**
+ * A basic filter function that filters the search string against the label of the options object
+ * @param options the array of options to filter
+ * @param searchString the string from the input
+ */
+function filterOptionsByLabel(options, searchString) {
+    return options.filter(option => {
+        return option.label && option.label.toLowerCase().includes(searchString.toLowerCase());
+    });
+}
+
+/**
+ * The user can give us select options as an array, a function that resolves to a promise,
+ * or an observable. This functions consumes any of those and returns an observable that
+ * resolves an array of options
+ *
+ * @param options the options passed in from the config
+ * @param emptyMessageOption the message to display when the array is empty
+ */
+function observablifyOptions(options, parentGroup, searchString) {
+    const calledOptions = callOptionsIfFunction(options, parentGroup, searchString);
+    // if options are a promise
+    const observableOptions = calledOptions instanceof Promise
+        // convert to observable
+        ? from(calledOptions)
+        // if array that isn't empty
+        : Array.isArray(calledOptions) && calledOptions.length
+            // convert to observable
+            ? of(calledOptions)
+            // if observable
+            : isObservable(calledOptions)
+                // return it
+                ? calledOptions
+                // else an empty array
+                : of([]);
+    return observableOptions;
+}
+
+function convertBytesToMb(bytes) {
+    return bytes / 1048576;
+}
+function maxFileSizeValidator(maxFileSize) {
+    return (control) => {
+        const controlValue = control.value;
+        if (!(controlValue instanceof File)) {
+            return null;
+        }
+        const actualFileSize = +convertBytesToMb(controlValue.size).toPrecision(3);
+        if (maxFileSize > actualFileSize)
+            return null;
+        return { maxFileSize: { maxFileSize, actualFileSize } };
+    };
+}
+function allowedFileExtValidator(allowedFileExtensions, onlyAllowFiles = true) {
+    return (control) => {
+        const controlValue = control.value;
+        const isFile = controlValue instanceof File;
+        if (!onlyAllowFiles && !isFile)
+            return null;
+        const actualExtension = isFile ? controlValue.name.split('.').pop().toLocaleLowerCase() : 'Not a file';
+        const isAllowedExtension = allowedFileExtensions.includes(actualExtension);
+        if (isAllowedExtension) {
+            return null;
+        }
+        return { allowedExtension: { allowedFileExtensions, actualExtension } };
+    };
+}
+function allowedFileType(matchExp) {
+    return (formControl) => {
+        const value = formControl.value;
+        if (!(value instanceof File))
+            return null;
+        const type = value.type;
+        const matches = type.match(matchExp);
+        if (!type || !matches?.length) {
+            return {
+                allowedFileType: {
+                    actualType: type,
+                    allowedTypeExp: matchExp
+                }
+            };
+        }
+        else {
+            return null;
+        }
+    };
+}
+
+class CrisprFieldComponent {
+    constructor() {
+        this.inputConfig = input(null, { ...(ngDevMode ? { debugName: "inputConfig" } : {}), alias: 'config' });
+        this.config = computed(() => {
+            const c = this.inputConfig();
+            return c && this.defaultConfig ? { ...this.defaultConfig, ...c } : c;
+        }, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.testIdPrefix = input(undefined, ...(ngDevMode ? [{ debugName: "testIdPrefix" }] : []));
+        this.testId = computed(() => {
+            const config = this.config();
+            const id = config?.testId || config?.controlName;
+            if (!id)
+                return undefined;
+            const prefix = this.testIdPrefix();
+            return prefix ? `${prefix}.${id}` : id;
+        }, ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: CrisprFieldComponent, isStandalone: true, inputs: { inputConfig: { classPropertyName: "inputConfig", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, testIdPrefix: { classPropertyName: "testIdPrefix", publicName: "testIdPrefix", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFieldComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true
+                }]
+        }], propDecorators: { inputConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], testIdPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "testIdPrefix", required: false }] }] } });
+
+class CrisprControlComponent extends CrisprFieldComponent {
+    constructor() {
+        super();
+        this.destroyRef = inject(DestroyRef);
+        this.injector = inject(Injector);
+        this.group = input(null, ...(ngDevMode ? [{ debugName: "group" }] : []));
+        this.control = computed(() => this.group()?.get(this.config().controlName), ...(ngDevMode ? [{ debugName: "control" }] : []));
+        this.valueChanges = output();
+        this.value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        effect(() => {
+            this.setControlValue(this.value());
+        });
+    }
+    ngOnInit() {
+        this.control().valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
+            this.valueChanges.emit(value);
+        });
+        // Computed fields derive their value from sibling controls, which only exist once the whole form has
+        // rendered, so re-run validation (and valueChanges) after the first render to compute initial values.
+        afterNextRender(() => {
+            this.control().updateValueAndValidity();
+        }, { injector: this.injector });
+    }
+    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: "17.1.0", version: "21.1.6", type: CrisprControlComponent, isStandalone: true, inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChanges: "valueChanges" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprControlComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], valueChanges: [{ type: i0.Output, args: ["valueChanges"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+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('');
+        // Narrows the parent's computed config type to include C-specific properties (e.g. chiplist-only fields)
+        // Must re-implement the defaultConfig merge from CrisprFieldComponent because this override replaces it.
+        this.config = computed(() => {
+            const c = this.inputConfig();
+            return (c && this.defaultConfig)
+                ? { ...this.defaultConfig, ...c }
+                : c;
+        }, ...(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.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));
+    }
+    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: "21.1.6", ngImport: i0, type: AbstractAutocompleteComponent, decorators: [{
+            type: Directive
+        }] });
+
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+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: "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: () => Promise.resolve().then(function () { return index$e; }).then(({ ButtonComponent }) => ButtonComponent),
+    input: () => Promise.resolve().then(function () { return index$9; }).then(({ InputFieldComponent }) => InputFieldComponent),
+    select: () => Promise.resolve().then(function () { return index$6; }).then(({ SelectFieldComponent }) => SelectFieldComponent),
+    radio: () => Promise.resolve().then(function () { return index$7; }).then(({ RadioFieldComponent }) => RadioFieldComponent),
+    autocomplete: () => Promise.resolve().then(function () { return index$f; }).then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
+    autocompleteChiplist: () => Promise.resolve().then(function () { return index$g; }).then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
+    map: () => Promise.resolve().then(function () { return index$8; }).then(({ MapFieldComponent }) => MapFieldComponent),
+    textarea: () => Promise.resolve().then(function () { return index$4; }).then(({ TextareaFieldComponent }) => TextareaFieldComponent),
+    checkbox: () => Promise.resolve().then(function () { return index$d; }).then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
+    slider: () => Promise.resolve().then(function () { return index$5; }).then(({ SliderFieldComponent }) => SliderFieldComponent),
+    datepicker: () => Promise.resolve().then(function () { return index$c; }).then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
+    fileUpload: () => Promise.resolve().then(function () { return index$h; }).then(({ FileUploadFieldComponent }) => FileUploadFieldComponent),
+    imageUpload: () => Promise.resolve().then(function () { return index$a; }).then(({ ImageUploadFieldComponent }) => ImageUploadFieldComponent),
+    heading: () => Promise.resolve().then(function () { return index$2; }).then(({ HeadingComponent }) => HeadingComponent),
+    divider: () => Promise.resolve().then(function () { return index$b; }).then(({ DividerComponent }) => DividerComponent),
+    unitConversion: () => Promise.resolve().then(function () { return index$3; }).then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent),
+};
+function isControlComponent(component) {
+    return component && isControlConfig(component.config()) && 'value' in component;
+}
+function isControlOrButtonComponent(component) {
+    return (isControlComponent(component) ||
+        component.config().controlType === ControlType.BUTTON);
+}
+
+class CrisprFieldDirective {
+    constructor() {
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+        this.group = input(...(ngDevMode ? [undefined, { debugName: "group" }] : []));
+        this.testIdPrefix = input(undefined, ...(ngDevMode ? [{ debugName: "testIdPrefix" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.container = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        effect(() => {
+            this.updateComponentValue(this.value());
+        });
+    }
+    async ngOnInit() {
+        const component = this.config().component ||
+            (await FIELD_COMPONENTS[this.config().controlType]());
+        this.componentRef =
+            this.container.createComponent(component);
+        this.component = this.componentRef.instance;
+        this.componentRef.setInput('config', this.config());
+        if (isControlOrButtonComponent(this.component)) {
+            this.componentRef.setInput('group', this.group());
+        }
+        this.componentRef.setInput('testIdPrefix', this.testIdPrefix());
+        this.updateComponentValue(this.value());
+        if (!this.config().classes)
+            return;
+        this.config().classes.forEach((klass) => {
+            if (klass.includes(' ')) {
+                throw Error(`Improperly formatted class. '${klass}' cannot contain spaces.`);
+            }
+            else {
+                this.renderer.addClass(this.componentRef.location.nativeElement, klass);
+            }
+        });
+    }
+    updateComponentValue(value) {
+        if (this.componentRef && isControlComponent(this.component)) {
+            this.componentRef.setInput('value', value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: CrisprFieldDirective, isStandalone: true, selector: "[crisprField]", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, testIdPrefix: { classPropertyName: "testIdPrefix", publicName: "testIdPrefix", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[crisprField]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], testIdPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "testIdPrefix", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+
+class InitialControlValuePipe {
+    // TODO: does changing any to unknown break anything?
+    transform(initialFormValue, fieldConfig) {
+        return initialFormValue && isControlConfig(fieldConfig)
+            ? initialFormValue[fieldConfig.controlName] || null
+            : null;
+    }
+    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: true, name: "initialControlValue" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InitialControlValuePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'initialControlValue' }]
+        }] });
+
+class CrisprFormComponent {
+    constructor() {
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.form = input(new FormGroup({}), ...(ngDevMode ? [{ debugName: "form" }] : []));
+        this.value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.submitted = output();
+        /** Patch form values whenever the [value] input changes without firing valueChanges. */
+        this.patchValueEffect = effect(() => {
+            const value = this.value();
+            untracked(() => {
+                if (value) {
+                    this.form().patchValue(value, { emitEvent: false });
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "patchValueEffect" }] : []));
+        // proxy value and status change events through to consuming component
+        this.valueChanges = outputFromObservable(toObservable(this.form).pipe(switchMap((f) => f.valueChanges)));
+        this.statusChanges = outputFromObservable(toObservable(this.form).pipe(switchMap((f) => f.statusChanges)));
+        this.submitTrigger = viewChild('submitTrigger', ...(ngDevMode ? [{ debugName: "submitTrigger" }] : []));
+    }
+    ngOnInit() {
+        // build out the form, note that we pass in the form as the third argument and the function modifies it
+        buildFormGroupFromConfig(this.config(), this.value(), this.form());
+    }
+    handleSubmit() {
+        this.form().markAllAsTouched();
+        this.submitted.emit(this.form());
+    }
+    triggerSubmit() {
+        this.submitTrigger().nativeElement.click();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: CrisprFormComponent, isStandalone: true, selector: "crispr-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, host: { properties: { "attr.data-density": "config().density ?? null" } }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true, isSignal: 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 crisprField\n      [value]=\"value() | initialControlValue : field\"\n      [config]=\"field\"\n      [group]=\"form()\" />\n  }\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n  Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n  (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" data-testid=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}:host[data-density=\"-1\"] ::ng-deep{--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-select-arrow-transform: translateY(-8px)}:host[data-density=\"-1\"] ::ng-deep .mat-calendar-controls{--mat-icon-button-touch-target-display: none}:host[data-density=\"-1\"] ::ng-deep .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-1\"] ::ng-deep{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-radio-state-layer-size: 36px;--mat-radio-touch-target-display: block;--mat-button-filled-container-height: 32px;--mat-button-filled-touch-target-display: block;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-container-height: 32px;--mat-button-protected-touch-target-display: block;--mat-button-text-container-height: 32px;--mat-button-text-touch-target-display: block;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: block;--mat-icon-button-touch-target-display: block}:host[data-density=\"-1\"] ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 44px;--mat-icon-button-state-layer-size: 44px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:10px}:host[data-density=\"-2\"] ::ng-deep{--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-select-arrow-transform: none}:host[data-density=\"-2\"] ::ng-deep .mat-calendar-controls{--mat-icon-button-touch-target-display: none}:host[data-density=\"-2\"] ::ng-deep .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-2\"] ::ng-deep{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-radio-state-layer-size: 32px;--mat-radio-touch-target-display: none;--mat-button-filled-container-height: 28px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 28px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 28px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 28px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 28px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}:host[data-density=\"-2\"] ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-3\"] ::ng-deep{--mat-form-field-container-height: 44px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 10px;--mat-form-field-filled-with-label-container-padding-top: 10px;--mat-form-field-filled-with-label-container-padding-bottom: 10px;--mat-select-arrow-transform: none}:host[data-density=\"-3\"] ::ng-deep .mat-calendar-controls{--mat-icon-button-touch-target-display: none}:host[data-density=\"-3\"] ::ng-deep .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-3\"] ::ng-deep{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 28px;--mat-radio-state-layer-size: 28px;--mat-radio-touch-target-display: none;--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}:host[data-density=\"-3\"] ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 36px;--mat-icon-button-state-layer-size: 36px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:6px}:host[data-density=\"-4\"] ::ng-deep{--mat-form-field-container-height: 40px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 8px;--mat-form-field-filled-with-label-container-padding-top: 8px;--mat-form-field-filled-with-label-container-padding-bottom: 8px;--mat-select-arrow-transform: none}:host[data-density=\"-4\"] ::ng-deep .mat-calendar-controls{--mat-icon-button-touch-target-display: none}:host[data-density=\"-4\"] ::ng-deep .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-4\"] ::ng-deep{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 28px;--mat-radio-state-layer-size: 28px;--mat-radio-touch-target-display: none;--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}:host[data-density=\"-4\"] ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}:host[data-density=\"-5\"] ::ng-deep{--mat-form-field-container-height: 36px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 6px;--mat-form-field-filled-with-label-container-padding-top: 6px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-select-arrow-transform: none}:host[data-density=\"-5\"] ::ng-deep .mat-calendar-controls{--mat-icon-button-touch-target-display: none}:host[data-density=\"-5\"] ::ng-deep .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-5\"] ::ng-deep{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 28px;--mat-radio-state-layer-size: 28px;--mat-radio-touch-target-display: none;--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}:host[data-density=\"-5\"] ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "testIdPrefix", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
+                        '[attr.data-density]': 'config().density ?? null',
+                    }, imports: [
+                        CommonModule,
+                        CrisprFieldDirective,
+                        ReactiveFormsModule,
+                        ControlErrorContainerDirective,
+                        ControlErrorsFormDirective,
+                        InitialControlValuePipe
+                    ], 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 crisprField\n      [value]=\"value() | initialControlValue : field\"\n      [config]=\"field\"\n      [group]=\"form()\" />\n  }\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n  Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n  (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" data-testid=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}:host[data-density=\"-1\"] ::ng-deep{--mat-form-field-container-height: 52px;--mat-form-field-filled-label-display: block;--mat-form-field-container-vertical-padding: 14px;--mat-form-field-filled-with-label-container-padding-top: 22px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-select-arrow-transform: translateY(-8px)}:host[data-density=\"-1\"] ::ng-deep .mat-calendar-controls{--mat-icon-button-touch-target-display: none}:host[data-density=\"-1\"] ::ng-deep .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-1\"] ::ng-deep{--mat-checkbox-touch-target-display: block;--mat-checkbox-state-layer-size: 36px;--mat-radio-state-layer-size: 36px;--mat-radio-touch-target-display: block;--mat-button-filled-container-height: 32px;--mat-button-filled-touch-target-display: block;--mat-button-outlined-container-height: 32px;--mat-button-outlined-touch-target-display: block;--mat-button-protected-container-height: 32px;--mat-button-protected-touch-target-display: block;--mat-button-text-container-height: 32px;--mat-button-text-touch-target-display: block;--mat-button-tonal-container-height: 32px;--mat-button-tonal-touch-target-display: block;--mat-icon-button-touch-target-display: block}:host[data-density=\"-1\"] ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 44px;--mat-icon-button-state-layer-size: 44px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:10px}:host[data-density=\"-2\"] ::ng-deep{--mat-form-field-container-height: 48px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 12px;--mat-form-field-filled-with-label-container-padding-top: 12px;--mat-form-field-filled-with-label-container-padding-bottom: 12px;--mat-select-arrow-transform: none}:host[data-density=\"-2\"] ::ng-deep .mat-calendar-controls{--mat-icon-button-touch-target-display: none}:host[data-density=\"-2\"] ::ng-deep .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-2\"] ::ng-deep{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 32px;--mat-radio-state-layer-size: 32px;--mat-radio-touch-target-display: none;--mat-button-filled-container-height: 28px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 28px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 28px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 28px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 28px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}:host[data-density=\"-2\"] ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-3\"] ::ng-deep{--mat-form-field-container-height: 44px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 10px;--mat-form-field-filled-with-label-container-padding-top: 10px;--mat-form-field-filled-with-label-container-padding-bottom: 10px;--mat-select-arrow-transform: none}:host[data-density=\"-3\"] ::ng-deep .mat-calendar-controls{--mat-icon-button-touch-target-display: none}:host[data-density=\"-3\"] ::ng-deep .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-3\"] ::ng-deep{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 28px;--mat-radio-state-layer-size: 28px;--mat-radio-touch-target-display: none;--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}:host[data-density=\"-3\"] ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 36px;--mat-icon-button-state-layer-size: 36px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:6px}:host[data-density=\"-4\"] ::ng-deep{--mat-form-field-container-height: 40px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 8px;--mat-form-field-filled-with-label-container-padding-top: 8px;--mat-form-field-filled-with-label-container-padding-bottom: 8px;--mat-select-arrow-transform: none}:host[data-density=\"-4\"] ::ng-deep .mat-calendar-controls{--mat-icon-button-touch-target-display: none}:host[data-density=\"-4\"] ::ng-deep .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-4\"] ::ng-deep{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 28px;--mat-radio-state-layer-size: 28px;--mat-radio-touch-target-display: none;--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}:host[data-density=\"-4\"] ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 32px;--mat-icon-button-state-layer-size: 32px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:4px}:host[data-density=\"-5\"] ::ng-deep{--mat-form-field-container-height: 36px;--mat-form-field-filled-label-display: none;--mat-form-field-container-vertical-padding: 6px;--mat-form-field-filled-with-label-container-padding-top: 6px;--mat-form-field-filled-with-label-container-padding-bottom: 6px;--mat-select-arrow-transform: none}:host[data-density=\"-5\"] ::ng-deep .mat-calendar-controls{--mat-icon-button-touch-target-display: none}:host[data-density=\"-5\"] ::ng-deep .mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 40px;--mat-icon-button-state-layer-size: 40px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:8px}:host[data-density=\"-5\"] ::ng-deep{--mat-checkbox-touch-target-display: none;--mat-checkbox-state-layer-size: 28px;--mat-radio-state-layer-size: 28px;--mat-radio-touch-target-display: none;--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none;--mat-icon-button-touch-target-display: none}:host[data-density=\"-5\"] ::ng-deep .mat-mdc-icon-button.mat-mdc-button-base{--mdc-icon-button-state-layer-size: 28px;--mat-icon-button-state-layer-size: 28px;width:var(--mat-icon-button-state-layer-size);height:var(--mat-icon-button-state-layer-size);padding:2px}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], valueChanges: [{ type: i0.Output, args: ["valueChanges"] }], statusChanges: [{ type: i0.Output, args: ["statusChanges"] }], submitTrigger: [{ type: i0.ViewChild, args: ['submitTrigger', { isSignal: true }] }] } });
+
+class FileDropzoneDirective {
+    constructor() {
+        this.fileDrop = output();
+        this.crisprFileDropzone = input(true, ...(ngDevMode ? [{ debugName: "crisprFileDropzone" }] : []));
+    }
+    onDrop($event) {
+        if (this.crisprFileDropzone()) {
+            $event.preventDefault();
+            this.fileDrop.emit($event.dataTransfer.files);
+        }
+    }
+    // Prevents DOM from trying to open file in browser
+    onDragOver($event) {
+        if (this.crisprFileDropzone()) {
+            $event.preventDefault();
+        }
+    }
+    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: "17.1.0", version: "21.1.6", type: FileDropzoneDirective, isStandalone: true, selector: "[crisprFileDropzone]", inputs: { crisprFileDropzone: { classPropertyName: "crisprFileDropzone", publicName: "crisprFileDropzone", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileDrop: "fileDrop" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FileDropzoneDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[crisprFileDropzone]',
+                    standalone: true,
+                }]
+        }], propDecorators: { fileDrop: [{ type: i0.Output, args: ["fileDrop"] }], crisprFileDropzone: [{ type: i0.Input, args: [{ isSignal: true, alias: "crisprFileDropzone", required: false }] }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }] } });
+
+class InfoComponent {
+    constructor() {
+        this.info = input.required(...(ngDevMode ? [{ debugName: "info" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: InfoComponent, isStandalone: true, selector: "crispr-info", inputs: { info: { classPropertyName: "info", publicName: "info", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (info()) {\n  <mat-icon\n    [matTooltip]=\"info().content\"\n    [matTooltipPosition]=\"info().tooltipPosition || 'below'\">\n    {{info().iconName || 'info'}}\n  </mat-icon>\n}\n", styles: [":host{margin-left:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-info', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatIconModule,
+                        MatTooltipModule
+                    ], template: "@if (info()) {\n  <mat-icon\n    [matTooltip]=\"info().content\"\n    [matTooltipPosition]=\"info().tooltipPosition || 'below'\">\n    {{info().iconName || 'info'}}\n  </mat-icon>\n}\n", styles: [":host{margin-left:4px}\n"] }]
+        }], propDecorators: { info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: true }] }] } });
+
+const defaultConfig$9 = {
+    typographyClass: 'mat-h3',
+};
+class HeadingComponent extends CrisprFieldComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$9;
+    }
+    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 matSuffix\n        [info]=\"config().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: "21.1.6", ngImport: i0, type: HeadingComponent, decorators: [{
+            type: Component,
+            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 matSuffix\n        [info]=\"config().info\" />\n    }\n  </label>\n}\n", styles: [":host{display:block}\n"] }]
+        }] });
+
+class FieldContainerComponent {
+    constructor() {
+        // the configuration object for the field
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        // the parent formGroup
+        this.group = input.required(...(ngDevMode ? [{ debugName: "group" }] : []));
+        // boolean whether field-container is inline
+        this.inlineField = input(false, ...(ngDevMode ? [{ debugName: "inlineField" }] : []));
+        this.isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+        this.isHidden = computed(() => this.isDisabled() && !!this.config().hideDisabled, ...(ngDevMode ? [{ debugName: "isHidden" }] : []));
+        this.subs = [];
+    }
+    ngOnInit() {
+        this.disabled$ = this.connectDisabledCallback(this.group(), this.config());
+        this.subs.push(this.disabled$.subscribe(disabled => this.isDisabled.set(disabled)));
+        // we tried moving this into afterViewChecked and afterContentChecked lifecycle hooks without any luck
+        if (this.config().computeValue) {
+            this.subs.push(this.config()
+                .computeValue(this.group())
+                .pipe(distinctUntilChanged(), tap((computedValue) => this.group().get(this.config().controlName).setValue(computedValue)))
+                .subscribe());
+        }
+    }
+    ngOnDestroy() {
+        this.subs.forEach((sub) => sub.unsubscribe);
+    }
+    /**
+     * Connects user defined disabledCallback function to the the view, so that the control is enabled/disabled
+     * appropriately. It also will hide disabled fields in the UI unless `hideDisabled` is set to
+     * false in the controls config
+     * @param group used to get valueChanges from control
+     * @param config configuration object used to
+     */
+    connectDisabledCallback(group, config = null) {
+        const control = group.get(config.controlName);
+        // If the disabled$ function exists on the field config then call it with the disabledCallbackConfig
+        // as a parameter otherwise return an observable of true.
+        return config?.disabledCallback &&
+            config.disabledCallback instanceof Function
+            ? config.disabledCallback(group).pipe(
+            // This enables/disables when callback conditions are met
+            tap((shouldDisable) => shouldDisable
+                ? control.disable({ emitEvent: false })
+                : control.enable({ emitEvent: false })))
+            : of(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FieldContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: FieldContainerComponent, isStandalone: true, selector: "crispr-field-container", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: true, transformFunction: null }, inlineField: { classPropertyName: "inlineField", publicName: "inlineField", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "isHidden() ? \"none\" : \"\"" } }, ngImport: i0, template: "@if (!isHidden()) {\n  <div\n    [ngClass]=\"config().classes\"\n    [class.inline-field]=\"inlineField()\"\n    class=\"field-container\">\n    @if (config().heading) {\n      <crispr-heading [config]=\"config().heading\" />\n    }\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FieldContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-field-container', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, HeadingComponent], host: {
+                        '[style.display]': 'isHidden() ? "none" : ""',
+                    }, template: "@if (!isHidden()) {\n  <div\n    [ngClass]=\"config().classes\"\n    [class.inline-field]=\"inlineField()\"\n    class=\"field-container\">\n    @if (config().heading) {\n      <crispr-heading [config]=\"config().heading\" />\n    }\n    <ng-content />\n  </div>\n}\n", styles: ["::ng-deep mat-form-field.mat-mdc-form-field{display:block;padding:.25em 0}.inline-field{display:inline-block}\n"] }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], inlineField: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineField", required: false }] }] } });
+
+class SelectedFileComponent {
+    constructor() {
+        this.fileName = input.required(...(ngDevMode ? [{ debugName: "fileName" }] : []));
+        this.progress = input(...(ngDevMode ? [undefined, { debugName: "progress" }] : []));
+        this.showProgress = input(...(ngDevMode ? [undefined, { debugName: "showProgress" }] : []));
+        this.color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SelectedFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SelectedFileComponent, isStandalone: true, selector: "crispr-selected-file", inputs: { fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: true, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, showProgress: { classPropertyName: "showProgress", publicName: "showProgress", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<h3 class=\"mat-h3\">{{ fileName() }}</h3>\n@if (showProgress()) {\n  <mat-progress-bar mode=\"determinate\"\n    [color]=\"color()\"\n    [value]=\"progress()\" />\n}\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SelectedFileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-selected-file', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        MatProgressBarModule
+                    ], template: "<h3 class=\"mat-h3\">{{ fileName() }}</h3>\n@if (showProgress()) {\n  <mat-progress-bar mode=\"determinate\"\n    [color]=\"color()\"\n    [value]=\"progress()\" />\n}\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"] }]
+        }], propDecorators: { fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: true }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], showProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "showProgress", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+/* eslint-disable @nx/enforce-module-boundaries */
+class FileUploadFieldComponent extends CrisprControlComponent {
+    /**
+     * Plain boolean view of `uploaded`, kept only for the public `AbstractUploadComponent` contract so
+     * consumers of the `uploadFiles` callback can still read and assign `isUploaded`.
+     * Internal code and the template use the `uploaded` signal directly.
+     */
+    get isUploaded() {
+        return this.uploaded();
+    }
+    set isUploaded(value) {
+        this.uploaded.set(value);
+    }
+    // ngControl: NgControl = null;
+    constructor() {
+        super();
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        this.defaultConfig = {
+            allowMultipleFiles: false,
+            acceptedTypes: '*.*',
+            dropZoneText: 'DROP FILE HERE',
+            selectFilesButtonType: 'button',
+            selectButtonText: 'SELECT',
+            showClearFilesButton: true,
+            clearFilesButtonText: 'CLEAR',
+            uploadButtonText: 'UPLOAD',
+            uploadButtonType: 'button',
+            showUploadProgress: false,
+            disableOnUpload: true,
+        };
+        this.fileInputRef = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInputRef" }] : []));
+        this.selectedFiles = signal(null, ...(ngDevMode ? [{ debugName: "selectedFiles" }] : []));
+        this.selectedFilesArray = computed(() => this.selectedFiles() ? Array.from(this.selectedFiles()) : [], ...(ngDevMode ? [{ debugName: "selectedFilesArray" }] : []));
+        /**
+         * Whether the files have been uploaded. A signal so that changes made asynchronously (e.g. from the
+         * `uploadFiles` callback once an upload finishes) re-render the OnPush/zoneless component.
+         */
+        this.uploaded = signal(false, ...(ngDevMode ? [{ debugName: "uploaded" }] : []));
+        this.fileProgress = [];
+        const ngControl = this.ngControl;
+        if (this.ngControl != null) {
+            // Setting the value accessor directly (instead of using
+            // the providers) to avoid running into a circular import.
+            ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.disabled$ = this.config().disabledCallback
+            ? this.config().disabledCallback(this.group())
+            : of(false);
+    }
+    filesChanged(files) {
+        if (files && files.length > 0) {
+            this.selectedFiles.set(files);
+            this.control().patchValue(files);
+            this.config().filesChanged?.(this.group(), files);
+        }
+    }
+    uploadFiles() {
+        if (this.selectedFiles() && this.config().uploadFiles) {
+            this.uploaded.set(true);
+            this.config().uploadFiles(this.group(), this.selectedFiles(), this);
+        }
+    }
+    resetFileInput() {
+        this.fileInputRef().nativeElement.value = '';
+        this.control().patchValue(null);
+        this.uploaded.set(false);
+    }
+    writeValue(value) {
+        // clear file input
+        // this.host.nativeElement.value = '';
+        // this.file = null;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FileUploadFieldComponent, deps: [], 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, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  <mat-form-field floatLabel=\"always\"\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config().disableOnUpload && uploaded())\"\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() || 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 && uploaded()\"\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 [color]=\"config().color === 'primary' ? 'accent' : 'primary'\"\n              [fileName]=\"file.name\"\n              [showProgress]=\"config().showUploadProgress\"\n              [progress]=\"fileProgress && (fileProgress[i] | async)\" />\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 && uploaded())\"\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 && uploaded())\"\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: i3.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$1.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: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { 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: "21.1.6", ngImport: i0, type: FileUploadFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-file-upload-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FieldContainerComponent,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        SelectedFileComponent,
+                        ControlErrorContainerDirective,
+                        ControlErrorsDirective,
+                        FileDropzoneDirective
+                    ], standalone: true, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  <mat-form-field floatLabel=\"always\"\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config().disableOnUpload && uploaded())\"\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() || 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 && uploaded()\"\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 [color]=\"config().color === 'primary' ? 'accent' : 'primary'\"\n              [fileName]=\"file.name\"\n              [showProgress]=\"config().showUploadProgress\"\n              [progress]=\"fileProgress && (fileProgress[i] | async)\" />\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 && uploaded())\"\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 && uploaded())\"\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: () => [], propDecorators: { fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+
+var index$h = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FileUploadFieldComponent: FileUploadFieldComponent
+});
+
+class OptionComponent {
+    constructor() {
+        this.option = input.required(...(ngDevMode ? [{ debugName: "option" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: OptionComponent, isStandalone: true, selector: "crispr-option", inputs: { option: { classPropertyName: "option", publicName: "option", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div>\n  @if (option().imageUrl) {\n    <img\n      [src]=\"option().imageUrl\"\n      alt=\"image of {{option().label}}\"\n      style=\"vertical-align:middle;\"\n      aria-hidden\n      height=\"25\"/>\n  }\n  {{option().label}}\n</div>\n\n@if (option().info; as info) {\n  <crispr-info [info]=\"info\" />\n}\n", styles: [":host{display:flex;justify-content:space-between}:host img{margin-right:4px}\n"], dependencies: [{ kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-option', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [InfoComponent], template: "<div>\n  @if (option().imageUrl) {\n    <img\n      [src]=\"option().imageUrl\"\n      alt=\"image of {{option().label}}\"\n      style=\"vertical-align:middle;\"\n      aria-hidden\n      height=\"25\"/>\n  }\n  {{option().label}}\n</div>\n\n@if (option().info; as info) {\n  <crispr-info [info]=\"info\" />\n}\n", styles: [":host{display:flex;justify-content:space-between}:host img{margin-right:4px}\n"] }]
+        }], propDecorators: { option: [{ type: i0.Input, args: [{ isSignal: true, alias: "option", required: true }] }] } });
+
+/* eslint-disable @nx/enforce-module-boundaries */
+const defaultConfig$8 = {
+    chipsSelectable: true,
+    areChipsRemovable: true,
+    tabToSelect: true,
+    autoActiveFirstOption: true,
+    imageUrlParam: 'image',
+    typeDebounceTime: 500,
+    allowDuplicates: false,
+    duplicateCompareFunction: (chip, option) => chip.value === option.value,
+    separatorKeyCodes: [ENTER],
+    emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,
+};
+/** Sentinel used to detect "Create New" selection — never matches a real SelectOption */
+const CREATE_NEW_SENTINEL = Symbol('CREATE_NEW');
+class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$8;
+        this.chips$ = new BehaviorSubject([]);
+        this.selectedChip = signal(null, ...(ngDevMode ? [{ debugName: "selectedChip" }] : []));
+        this.controlValue$ = this.chips$.pipe(tap((chips) => {
+            this.control().setValue(chips.map((chip) => chip.value));
+        }));
+        // We need use ViewChild twice on the same template ref to access as different types
+        // - the MatAutocompleteTrigger is used to for selecting value on tab
+        // - the ElementRef<HTMLInputElement> is used to clear the value from input element on selection
+        this.chipInput = viewChild('autoInput', { ...(ngDevMode ? { debugName: "chipInput" } : {}), read: MatAutocompleteTrigger });
+        this.chipInputRef = viewChild('autoInput', ...(ngDevMode ? [{ debugName: "chipInputRef" }] : []));
+        this.overlayOrigin = viewChild(CdkOverlayOrigin, ...(ngDevMode ? [{ debugName: "overlayOrigin" }] : []));
+        this.createNewSentinel = CREATE_NEW_SENTINEL;
+        this.showCreateForm = signal(false, ...(ngDevMode ? [{ debugName: "showCreateForm" }] : []));
+        this.createFormGroup = new FormGroup({});
+        this.createFormPositions = [
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }
+        ];
+    }
+    get overlayWidth() {
+        return this.overlayOrigin()?.elementRef.nativeElement.offsetWidth ?? 0;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.remainingOptions$ = combineLatest([this.chips$, this.options$]).pipe(map(([chips, options]) => {
+            return this.config().allowDuplicates
+                ? options
+                : options?.filter((option) => {
+                    const compare = this.config().duplicateCompareFunction
+                        ?? ((chip, opt) => chip.value === opt.value);
+                    return !chips.some((chip) => compare(chip, option));
+                });
+        }));
+    }
+    setControlValue(value) {
+        if (value) {
+            this.chips$.next(value);
+        }
+    }
+    handleSelect(event) {
+        if (event.option.value === CREATE_NEW_SENTINEL) {
+            this.openCreateForm();
+            return;
+        }
+        const selectedOption = event.option.value;
+        this.chips$.next([...this.chips$.value, selectedOption]);
+        this.chipInputRef().nativeElement.value = '';
+        this.autocompleteInputControl.setValue('');
+        // A macrotask is needed here (not a change detection workaround): MatAutocomplete only closes its panel
+        // after this selection event has finished, so reopening it synchronously is a no-op.
+        setTimeout(() => this.chipInput().openPanel());
+    }
+    openCreateForm() {
+        this.createFormGroup = buildFormGroupFromConfig({ fields: this.config().createChip.fields });
+        this.chipInputRef().nativeElement.value = '';
+        this.autocompleteInputControl.setValue('');
+        // Deferred to a macrotask so that the click that opened the form has finished bubbling to the document;
+        // otherwise the overlay's outside-click handling would close the form straight away (zone.js or not).
+        setTimeout(() => this.showCreateForm.set(true));
+    }
+    submitNewChip() {
+        this.config().createChip.submitChip(this.createFormGroup)
+            .pipe(take(1))
+            .subscribe((newChip) => {
+            this.chips$.next([...this.chips$.value, newChip]);
+            this.showCreateForm.set(false);
+        });
+    }
+    closeCreateForm() {
+        this.showCreateForm.set(false);
+    }
+    /**
+     * To follow ARIA standards we want to select the active option on blur.
+     * matChipInputAddOnBlur should do this but it causes buggy behaviour
+     * @param event blur event that triggers the handle blur
+     */
+    handleTab(_event) {
+        const chipInput = this.chipInput();
+        if (chipInput.activeOption &&
+            (this.config().tabToSelect || this.config().addChipOnBlur)) {
+            const chip = chipInput.activeOption.value;
+            this.chips$.next([...this.chips$.value, chip]);
+        }
+    }
+    /**
+     * Handles selection via key tokens passed through separatorKeyCodes property
+     * NOTE: If TAB is used focus does not move on to next component
+     * @param event
+     */
+    handleTokenEnd(event) {
+        const chipInput = this.chipInput();
+        if (chipInput.activeOption) {
+            chipInput.activeOption.select();
+        }
+        event.chipInput?.clear();
+    }
+    mapToLabel(option) {
+        if (!option || option === CREATE_NEW_SENTINEL)
+            return '';
+        return option.label ?? '';
+    }
+    removeChip(removedChip) {
+        const remainingChips = this.chips$.value.filter((chip) => chip !== removedChip);
+        this.chips$.next(remainingChips);
+    }
+    highlightChip(chip) {
+        if (this.config().chipsSelectable) {
+            this.selectedChip.set(chip);
+        }
+    }
+    blurField() {
+        this.selectedChip.set(null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AutocompleteChiplistFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: AutocompleteChiplistFieldComponent, isStandalone: true, selector: "crispr-autocomplete-chiplist-field", viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["autoInput"], descendants: true, read: MatAutocompleteTrigger, isSignal: true }, { propertyName: "chipInputRef", first: true, predicate: ["autoInput"], descendants: true, isSignal: true }, { propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n\n  <mat-form-field cdkOverlayOrigin [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n\n    <mat-chip-grid #chipList>\n      <!-- [selectable]=\"config().chipsSelectable\" -->\n      @for (chip of controlValue$ | async; track chip; let i = $index) {\n      <mat-chip-row class=\"refinement-chip\" [removable]=\"config().areChipsRemovable\"\n        [highlighted]=\"chip?.value === selectedChip()?.value\" (click)=\"highlightChip(chip)\" (removed)=\"removeChip(chip)\">\n        @if (chip.imageUrl) {<img [src]=\"chip.imageUrl\" matChipAvatar alt=\"image of {{chip.label}}\">}\n        {{chip.label}}\n        @if (config().areChipsRemovable) {<mat-icon matChipRemove>cancel</mat-icon>}\n      </mat-chip-row>\n      }\n      <input class=\"hidden-error-directive-anchor\" (blur)=\"blurField()\" [formControlName]=\"config().controlName\"\n        type=\"text\" />\n\n      <input matInput [formControl]=\"autocompleteInputControl\" [placeholder]=\"config().placeholder\"\n        [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" (keydown.tab)=\"handleTab($event)\"\n        [matChipInputSeparatorKeyCodes]=\"config().separatorKeyCodes\" (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n        role=\"searchbox\" type=\"text\" autocapitalize=\"off\" autocorrect=\"off\" spellcheck=\"false\" (blur)=\"blurField()\"\n        #autoInput />\n      @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n      @if (config().info) {<crispr-info matSuffix [info]=\"config().info \" />}\n\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" [autoActiveFirstOption]=\"this.config().autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\" [displayWith]=\"mapToLabel\">\n      @if (remainingOptions$ | async; as remainingOptions) {\n      @if (remainingOptions.length > 0) {\n      @for (option of remainingOptions$ | async; track option.value) {\n      <mat-option [value]=\"option\">\n        <crispr-option [option]=\"option\" />\n      </mat-option>\n      }\n      } @else {\n      <mat-option disabled=\"true\">\n        {{config().emptyOptionsMessage}}\n      </mat-option>\n      }\n      } @else {\n      <mat-option disabled=\"true\">\n        {{config().emptyOptionsMessage}}\n      </mat-option>\n      }\n      @if (config().createChip) {\n      <mat-option [value]=\"createNewSentinel\" class=\"create-new-option\">\n        {{ config().createChip?.createLabel ?? '+ Create New' }}\n      </mat-option>\n      }\n    </mat-autocomplete>\n\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n    [cdkConnectedOverlayOpen]=\"showCreateForm()\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    [cdkConnectedOverlayPositions]=\"createFormPositions\"\n    (overlayOutsideClick)=\"closeCreateForm()\">\n    <div class=\"create-chip-panel mat-elevation-z4\">\n      @for (field of config().createChip?.fields ?? []; track field) {\n      <ng-container crisprField [config]=\"field\" [group]=\"createFormGroup\" />\n      }\n      <div class=\"create-chip-actions\">\n        <button mat-stroked-button type=\"button\" (click)=\"closeCreateForm()\">Cancel</button>\n        <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"submitNewChip()\">\n          {{ config().createChip?.submitLabel ?? 'Add' }}\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n</crispr-field-container>\n", styles: [".refinement-chip .image-container{width:26px;height:26px;border-radius:50%;overflow:hidden;margin:-2px 4px -2px -8px}.refinement-chip .image-container img{width:100%;height:100%;object-fit:cover}.hidden-error-directive-anchor{display:none}::ng-deep .create-chip-panel{background:var(--mat-sys-surface, white);border-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;padding:16px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}.create-chip-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.create-new-option{font-style:italic;color:var(--mat-sys-primary, #6750a4)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: 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: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i5.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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: i3.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: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "testIdPrefix", "value"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AutocompleteChiplistFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-autocomplete-chiplist-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        OptionComponent,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatAutocompleteModule,
+                        MatInputModule,
+                        MatOptionModule,
+                        MatChipsModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        ControlErrorContainerDirective,
+                        ControlErrorsDirective,
+                        CdkConnectedOverlay,
+                        CdkOverlayOrigin,
+                        CrisprFieldDirective
+                    ], standalone: true, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n\n  <mat-form-field cdkOverlayOrigin [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n\n    <mat-chip-grid #chipList>\n      <!-- [selectable]=\"config().chipsSelectable\" -->\n      @for (chip of controlValue$ | async; track chip; let i = $index) {\n      <mat-chip-row class=\"refinement-chip\" [removable]=\"config().areChipsRemovable\"\n        [highlighted]=\"chip?.value === selectedChip()?.value\" (click)=\"highlightChip(chip)\" (removed)=\"removeChip(chip)\">\n        @if (chip.imageUrl) {<img [src]=\"chip.imageUrl\" matChipAvatar alt=\"image of {{chip.label}}\">}\n        {{chip.label}}\n        @if (config().areChipsRemovable) {<mat-icon matChipRemove>cancel</mat-icon>}\n      </mat-chip-row>\n      }\n      <input class=\"hidden-error-directive-anchor\" (blur)=\"blurField()\" [formControlName]=\"config().controlName\"\n        type=\"text\" />\n\n      <input matInput [formControl]=\"autocompleteInputControl\" [placeholder]=\"config().placeholder\"\n        [matChipInputFor]=\"chipList\" [matAutocomplete]=\"auto\" (keydown.tab)=\"handleTab($event)\"\n        [matChipInputSeparatorKeyCodes]=\"config().separatorKeyCodes\" (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n        role=\"searchbox\" type=\"text\" autocapitalize=\"off\" autocorrect=\"off\" spellcheck=\"false\" (blur)=\"blurField()\"\n        #autoInput />\n      @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n      @if (config().info) {<crispr-info matSuffix [info]=\"config().info \" />}\n\n    </mat-chip-grid>\n    <mat-autocomplete #auto=\"matAutocomplete\" [autoActiveFirstOption]=\"this.config().autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\" [displayWith]=\"mapToLabel\">\n      @if (remainingOptions$ | async; as remainingOptions) {\n      @if (remainingOptions.length > 0) {\n      @for (option of remainingOptions$ | async; track option.value) {\n      <mat-option [value]=\"option\">\n        <crispr-option [option]=\"option\" />\n      </mat-option>\n      }\n      } @else {\n      <mat-option disabled=\"true\">\n        {{config().emptyOptionsMessage}}\n      </mat-option>\n      }\n      } @else {\n      <mat-option disabled=\"true\">\n        {{config().emptyOptionsMessage}}\n      </mat-option>\n      }\n      @if (config().createChip) {\n      <mat-option [value]=\"createNewSentinel\" class=\"create-new-option\">\n        {{ config().createChip?.createLabel ?? '+ Create New' }}\n      </mat-option>\n      }\n    </mat-autocomplete>\n\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n    [cdkConnectedOverlayOpen]=\"showCreateForm()\"\n    [cdkConnectedOverlayWidth]=\"overlayWidth\"\n    [cdkConnectedOverlayPositions]=\"createFormPositions\"\n    (overlayOutsideClick)=\"closeCreateForm()\">\n    <div class=\"create-chip-panel mat-elevation-z4\">\n      @for (field of config().createChip?.fields ?? []; track field) {\n      <ng-container crisprField [config]=\"field\" [group]=\"createFormGroup\" />\n      }\n      <div class=\"create-chip-actions\">\n        <button mat-stroked-button type=\"button\" (click)=\"closeCreateForm()\">Cancel</button>\n        <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"submitNewChip()\">\n          {{ config().createChip?.submitLabel ?? 'Add' }}\n        </button>\n      </div>\n    </div>\n  </ng-template>\n\n</crispr-field-container>\n", styles: [".refinement-chip .image-container{width:26px;height:26px;border-radius:50%;overflow:hidden;margin:-2px 4px -2px -8px}.refinement-chip .image-container img{width:100%;height:100%;object-fit:cover}.hidden-error-directive-anchor{display:none}::ng-deep .create-chip-panel{background:var(--mat-sys-surface, white);border-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;padding:16px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}.create-chip-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.create-new-option{font-style:italic;color:var(--mat-sys-primary, #6750a4)}\n"] }]
+        }], propDecorators: { chipInput: [{ type: i0.ViewChild, args: ['autoInput', { ...{ read: MatAutocompleteTrigger }, isSignal: true }] }], chipInputRef: [{ type: i0.ViewChild, args: ['autoInput', { isSignal: true }] }], overlayOrigin: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkOverlayOrigin), { isSignal: true }] }] } });
+
+var index$g = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AutocompleteChiplistFieldComponent: AutocompleteChiplistFieldComponent
+});
+
+/* eslint-disable @nx/enforce-module-boundaries */
+const defaultConfig$7 = {
+    autoActiveFirstOption: true,
+    typeDebounceTime: 500,
+    emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,
+};
+class AutocompleteFieldComponent extends AbstractAutocompleteComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$7;
+        this.autoInput = viewChild('autoInput', { ...(ngDevMode ? { debugName: "autoInput" } : {}), read: MatAutocompleteTrigger });
+        this.autoInputRef = viewChild('autoInput', ...(ngDevMode ? [{ debugName: "autoInputRef" }] : []));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.clearFieldSubscription =
+            this.autocompleteInputControl.valueChanges.subscribe((text) => {
+                if (typeof text === 'string' && text?.trim() === '') {
+                    this.control().setValue(null);
+                }
+            });
+    }
+    ngOnDestroy() {
+        this.clearFieldSubscription.unsubscribe();
+    }
+    setControlValue(value) {
+        if (this.control() && value) {
+            // sets the initial value on the control if one is passed
+            this.control().setValue(value.value || '');
+            this.autocompleteInputControl.setValue(value.label || '');
+        }
+    }
+    /**
+     * The material autocomplete defaults to displaying the options value instead of its label.
+     * We only have the value from the selected option to work with, so we have to pass the options
+     * through a function called in the template and return the function that the material displayWith
+     * input is expecting.
+     * @param options the array of options to search for option with corresponding value
+     */
+    displayLabel(options) {
+        if (this.config().displayWith) {
+            return this.config().displayWith(options);
+        }
+        return (value) => {
+            const label = !!options && Array.isArray(options)
+                ? options.find((option) => JSON.stringify(option.value) === JSON.stringify(value))?.label
+                : value;
+            return label;
+        };
+    }
+    handleSelect(event) {
+        this.control().setValue(event.option.value);
+        this.autoInputRef().nativeElement.blur();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AutocompleteFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: AutocompleteFieldComponent, isStandalone: true, selector: "crispr-autocomplete-field", viewQueries: [{ propertyName: "autoInput", first: true, predicate: ["autoInput"], descendants: true, read: MatAutocompleteTrigger, isSignal: true }, { propertyName: "autoInputRef", first: true, predicate: ["autoInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n\n  <mat-form-field\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n\n    <input class=\"hidden-error-directive-anchor\" [formControlName]=\"config().controlName\" type=\"text\"/>\n\n    <input\n      matInput\n      [formControl]=\"autocompleteInputControl\"\n      [placeholder]=\"config().placeholder\"\n      [matAutocomplete]=\"auto\"\n      role=\"textbox\"\n      type=\"textbox\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\"\n      #autoInput>\n\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().info) {<crispr-info matSuffix  [info]=\"config().info \" />}\n\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"config().autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"displayLabel(options$ | async)\">\n\n      @if (options$ | async; as options) {\n        @if (options.length > 0) {\n          @for (option of options; track option.value) {\n            <mat-option\n              [value]=\"option.value\">\n              <crispr-option [option]=\"option\" />\n            </mat-option>\n          }\n        } @else {\n          <mat-option disabled=\"true\">\n            {{config().emptyOptionsMessage}}\n          </mat-option>\n        }\n      } @else {\n        <mat-option disabled=\"true\">\n          {{config().emptyOptionsMessage}}\n        </mat-option>\n      }\n    </mat-autocomplete>\n\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n</crispr-field-container>\n", styles: [".hidden-error-directive-anchor{display:none}crispr-info[matSuffix]{margin-right:.75em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: 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: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: AutocompleteFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-autocomplete-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        OptionComponent,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatAutocompleteModule,
+                        MatInputModule,
+                        MatOptionModule,
+                        ControlErrorContainerDirective,
+                        ControlErrorsDirective
+                    ], standalone: true, template: "\n<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n\n  <mat-form-field\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n\n    <input class=\"hidden-error-directive-anchor\" [formControlName]=\"config().controlName\" type=\"text\"/>\n\n    <input\n      matInput\n      [formControl]=\"autocompleteInputControl\"\n      [placeholder]=\"config().placeholder\"\n      [matAutocomplete]=\"auto\"\n      role=\"textbox\"\n      type=\"textbox\"\n      autocapitalize=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\"\n      #autoInput>\n\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().info) {<crispr-info matSuffix  [info]=\"config().info \" />}\n\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"config().autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"displayLabel(options$ | async)\">\n\n      @if (options$ | async; as options) {\n        @if (options.length > 0) {\n          @for (option of options; track option.value) {\n            <mat-option\n              [value]=\"option.value\">\n              <crispr-option [option]=\"option\" />\n            </mat-option>\n          }\n        } @else {\n          <mat-option disabled=\"true\">\n            {{config().emptyOptionsMessage}}\n          </mat-option>\n        }\n      } @else {\n        <mat-option disabled=\"true\">\n          {{config().emptyOptionsMessage}}\n        </mat-option>\n      }\n    </mat-autocomplete>\n\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n</crispr-field-container>\n", styles: [".hidden-error-directive-anchor{display:none}crispr-info[matSuffix]{margin-right:.75em}\n"] }]
+        }], propDecorators: { autoInput: [{ type: i0.ViewChild, args: ['autoInput', { ...{ read: MatAutocompleteTrigger }, isSignal: true }] }], autoInputRef: [{ type: i0.ViewChild, args: ['autoInput', { isSignal: true }] }] } });
+
+var index$f = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AutocompleteFieldComponent: AutocompleteFieldComponent
+});
+
+class ButtonComponent extends CrisprFieldComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = {
+            buttonType: 'raised',
+            type: 'submit',
+        };
+        this.group = input(null, ...(ngDevMode ? [{ debugName: "group" }] : []));
+    }
+    get matButtonClass() {
+        return this.config().buttonType ? `mat-${this.config().buttonType}-button` : '';
+    }
+    ngOnInit() {
+        this.formValid$ = this.group().statusChanges.pipe(map((status) => status === 'VALID'), startWith(this.group().valid));
+    }
+    handleClick(group, event) {
+        if (this.config().callback) {
+            this.config().callback(group, event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ButtonComponent, isStandalone: true, selector: "crispr-button", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<button\n  [attr.data-testid]=\"testId()\"\n  [formGroup]=\"group()\"\n  mat-button\n  [ngClass]=\"matButtonClass\"\n  [color]=\"config().color\"\n  [disabled]=\"config().disabledOnInvalidForm && !(formValid$ | async)\"\n  [type]=\"config().type\"\n  (click)=\"handleClick(group(), $event)\"\n  [matTooltip]=\"config().info?.content\"\n  [matTooltipPosition]=\"config().info?.tooltipPosition || 'below'\">\n  {{ config().label }}\n  @if (config().icon) {<mat-icon>{{ config().icon}}</mat-icon>}\n</button>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.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: 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"] }, { 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: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        ReactiveFormsModule,
+                        ControlErrorContainerDirective
+                    ], standalone: true, template: "<button\n  [attr.data-testid]=\"testId()\"\n  [formGroup]=\"group()\"\n  mat-button\n  [ngClass]=\"matButtonClass\"\n  [color]=\"config().color\"\n  [disabled]=\"config().disabledOnInvalidForm && !(formValid$ | async)\"\n  [type]=\"config().type\"\n  (click)=\"handleClick(group(), $event)\"\n  [matTooltip]=\"config().info?.content\"\n  [matTooltipPosition]=\"config().info?.tooltipPosition || 'below'\">\n  {{ config().label }}\n  @if (config().icon) {<mat-icon>{{ config().icon}}</mat-icon>}\n</button>\n\n" }]
+        }], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }] } });
+
+var index$e = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ButtonComponent: ButtonComponent
+});
+
+/* eslint-disable @nx/enforce-module-boundaries */
+const defaultConfig$6 = {
+    labelPosition: 'after',
+    inline: false,
+};
+class CheckboxFieldComponent extends CrisprControlComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$6;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CheckboxFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: CheckboxFieldComponent, isStandalone: true, selector: "crispr-checkbox-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\"\n  [inlineField]=\"config().inline\">\n  <div\n    [formGroup]=\"group()\">\n    <mat-checkbox\n      [attr.data-testid]=\"testId()\"\n      [color]=\"config().color\"\n      [labelPosition]=\"config().labelPosition\"\n      [formControlName]=\"config().controlName\">\n      {{config().label}}\n      @if (config().info) {\n        <crispr-info matSuffix\n          [info]=\"config().info\" />\n      }\n    </mat-checkbox>\n  </div>\n</crispr-field-container>\n", styles: ["mat-checkbox{height:42px}\n"], dependencies: [{ kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: ControlErrorsDirective, selector: "[formControl], [formControlName]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-checkbox-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        InfoComponent,
+                        MatCheckboxModule,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        ControlErrorContainerDirective,
+                        ControlErrorsDirective
+                    ], standalone: true, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\"\n  [inlineField]=\"config().inline\">\n  <div\n    [formGroup]=\"group()\">\n    <mat-checkbox\n      [attr.data-testid]=\"testId()\"\n      [color]=\"config().color\"\n      [labelPosition]=\"config().labelPosition\"\n      [formControlName]=\"config().controlName\">\n      {{config().label}}\n      @if (config().info) {\n        <crispr-info matSuffix\n          [info]=\"config().info\" />\n      }\n    </mat-checkbox>\n  </div>\n</crispr-field-container>\n", styles: ["mat-checkbox{height:42px}\n"] }]
+        }] });
+
+var index$d = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CheckboxFieldComponent: CheckboxFieldComponent
+});
+
+/* eslint-disable @nx/enforce-module-boundaries */
+const defaultConfig$5 = {
+    startView: 'month',
+};
+class DatepickerFieldComponent extends CrisprControlComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$5;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const config = this.config();
+        this.startAt$ =
+            config.startAt instanceof Date
+                ? of(config.startAt)
+                : config.startAt instanceof Function
+                    ? config.startAt(this.group())
+                    : of(null);
+        this.dateClass = config?.cellClassFunction || null;
+        this.dateClass$ = config.dateClass
+            ? config?.dateClass(this.group())
+            : of(() => '');
+    }
+    ngAfterContentInit() {
+        if (this.config().datepickerActions) {
+            this.calendarFooterPortal = new ComponentPortal(this.config().datepickerActions);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DatepickerFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: DatepickerFieldComponent, isStandalone: true, selector: "crispr-datepicker-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  <mat-form-field\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <input\n      matInput\n      [formControlName]=\"config().controlName\"\n      [min]=\"config().min\"\n      [max]=\"config().max\"\n      [matDatepicker]=\"picker\"\n      [matDatepickerFilter]=\"config().datepickerFilter\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" />\n    <mat-datepicker\n      [touchUi]=\"config().touchUi\"\n      [startView]=\"config().startView\"\n      [startAt]=\"startAt$ | async\"\n      [dateClass]=\"dateClass || (dateClass$ | async)\"\n      #picker>\n      @if (calendarFooterPortal) {\n        <mat-datepicker-actions>\n          <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\" />\n        </mat-datepicker-actions>\n      }\n    </mat-datepicker>\n\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n</crispr-field-container>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i1$4.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { 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: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatInputModule }, { kind: "directive", type: i3$1.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: "ngmodule", type: MatDateFnsModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i5$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DatepickerFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-datepicker-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FieldContainerComponent,
+                        MatDatepickerModule,
+                        MatFormFieldModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        MatDateFnsModule,
+                        PortalModule,
+                        ControlErrorContainerDirective,
+                        ControlErrorsDirective
+                    ], standalone: true, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n  <mat-form-field\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <input\n      matInput\n      [formControlName]=\"config().controlName\"\n      [min]=\"config().min\"\n      [max]=\"config().max\"\n      [matDatepicker]=\"picker\"\n      [matDatepickerFilter]=\"config().datepickerFilter\">\n    <mat-datepicker-toggle matSuffix [for]=\"picker\" />\n    <mat-datepicker\n      [touchUi]=\"config().touchUi\"\n      [startView]=\"config().startView\"\n      [startAt]=\"startAt$ | async\"\n      [dateClass]=\"dateClass || (dateClass$ | async)\"\n      #picker>\n      @if (calendarFooterPortal) {\n        <mat-datepicker-actions>\n          <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\" />\n        </mat-datepicker-actions>\n      }\n    </mat-datepicker>\n\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n</crispr-field-container>\n\n" }]
+        }] });
+
+var index$c = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DatepickerFieldComponent: DatepickerFieldComponent
+});
+
+class DividerComponent extends CrisprFieldComponent {
+    constructor() {
+        super(...arguments);
+        // TODO: pull in type after configs are better organized
+        this.defaultConfig = {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: DividerComponent, isStandalone: true, selector: "crispr-divider", usesInheritance: true, ngImport: i0, template: "<mat-divider [ngClass]=\"config().classes\" />", styles: [":host{display:block;padding:1em 0}::ng-deep .mat-divider.mat-divider-horizontal{position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: DividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-divider', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatDividerModule], standalone: true, template: "<mat-divider [ngClass]=\"config().classes\" />", styles: [":host{display:block;padding:1em 0}::ng-deep .mat-divider.mat-divider-horizontal{position:relative}\n"] }]
+        }] });
+
+var index$b = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DividerComponent: DividerComponent
+});
+
+/* eslint-disable @nx/enforce-module-boundaries */
+class ImageUploadFieldComponent extends CrisprControlComponent {
+    /** Compresses (when configured) and wraps a file. Never rejects, failures are returned. */
+    async processFile(file, signal) {
+        if (!file || !(file instanceof File))
+            return { file: null };
+        try {
+            const { compressImage, targetCompressedImageFileSizeMb, minCompressionThresholdMb, maxWidthOrHeight, useWebWorker, } = this.config();
+            const fileSizeMb = convertBytesToMb(file.size);
+            const shouldCompress = compressImage &&
+                targetCompressedImageFileSizeMb < fileSizeMb &&
+                minCompressionThresholdMb < fileSizeMb;
+            let processed = file;
+            if (shouldCompress) {
+                const options = {
+                    // Use maxWidthOrHeight if it was provided, else use target compressed size
+                    ...(maxWidthOrHeight
+                        ? { maxWidthOrHeight }
+                        : { maxSizeMB: targetCompressedImageFileSizeMb }),
+                    useWebWorker,
+                    maxIterations: 30,
+                    signal,
+                    onProgress: (progress) => {
+                        // ignore progress from a compression that a newer selection has superseded
+                        if (this.destroyed || this.latestFile !== file)
+                            return;
+                        this.progress.set(progress);
+                    },
+                };
+                processed = await imageCompression(file, options);
+            }
+            const { type, name, lastModified } = processed;
+            return {
+                file: new File([processed], this.config().fileName || name, {
+                    type,
+                    lastModified,
+                }),
+            };
+        }
+        catch {
+            return { file: null, failed: file };
+        }
+    }
+    async toImageUrl(file) {
+        try {
+            const compressedStringImage = await imageCompression.getDataUrlFromFile(file);
+            return this.domSanitizer.bypassSecurityTrustResourceUrl(compressedStringImage);
+        }
+        catch {
+            return null;
+        }
+    }
+    constructor() {
+        super();
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        this.domSanitizer = inject(DomSanitizer);
+        this.defaultConfig = {
+            // allowMultipleFiles: false,
+            acceptedTypes: 'image/*',
+            dropZoneText: 'DROP FILE HERE',
+            selectFilesButtonType: 'button',
+            selectButtonText: 'SELECT',
+            showClearFilesButton: true,
+            clearFilesButtonText: 'CLEAR',
+            resetFilesButtonText: 'RESET',
+            imagePreviewHeight: '250px',
+            compressImage: false,
+            targetCompressedImageFileSizeMb: 0.4,
+            minCompressionThresholdMb: 0.6,
+            useWebWorker: true,
+        };
+        this.inputImageFileSubject = new Subject();
+        this.inputImageFile$ = this.inputImageFileSubject
+            .asObservable()
+            .pipe(shareReplay(1));
+        /**
+         * The compression progress (0-100), undefined when nothing is compressing
+         */
+        this.progress = signal(undefined, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+        /**
+         * Whether the field is idle, processing (compressing) a selected image, or failed to process it.
+         * While `processing` or `failed` the control is invalid.
+         */
+        this.processingState = signal('idle', ...(ngDevMode ? [{ debugName: "processingState" }] : []));
+        /** The message describing why processing failed, null unless `processingState` is `failed` */
+        this.failureMessage = signal(null, ...(ngDevMode ? [{ debugName: "failureMessage" }] : []));
+        /** The name of the file currently being processed */
+        this.processingFileName = signal('', ...(ngDevMode ? [{ debugName: "processingFileName" }] : []));
+        /**
+         * The most recently selected file (null once cleared/reset). Used to ignore progress
+         * reports from compressions that were superseded by a newer selection.
+         */
+        this.latestFile = null;
+        /** Set on destroy so that an in-flight compression can no longer touch the control or call back */
+        this.destroyed = false;
+        /**
+         * Makes the control invalid while an image is processing or after processing failed.
+         * Implemented as a validator because Angular clears manually set errors whenever
+         * the control's validity is recalculated.
+         */
+        this.imageProcessingValidator = () => 
+        // untracked: this runs inside effects (e.g. setControlValue) which must not depend on the state
+        untracked(() => {
+            switch (this.processingState()) {
+                case 'processing':
+                    return { imageProcessing: true };
+                case 'failed':
+                    return {
+                        imageProcessingFailed: {
+                            message: this.failureMessage() ||
+                                'The image could not be processed. Please try a different image.',
+                        },
+                    };
+                default:
+                    return null;
+            }
+        });
+        /**
+         * Compresses (when configured) and wraps each selected file. Failures are caught inside the
+         * switchMap so that one bad file never errors out, and so kills, the stream.
+         */
+        this.compressedFile$ = this.inputImageFile$.pipe(
+        // Each selection gets its own AbortController. switchMap unsubscribing (new selection, clear,
+        // reset) runs the teardown below which aborts the superseded compression, and an aborted
+        // compression never emits so it can not produce a `failed` state.
+        switchMap((file) => new Observable((subscriber) => {
+            const controller = new AbortController();
+            let finished = false;
+            this.processFile(file, controller.signal).then((result) => {
+                if (controller.signal.aborted)
+                    return;
+                finished = true;
+                subscriber.next(result);
+                subscriber.complete();
+            });
+            return () => {
+                if (!finished)
+                    controller.abort();
+            };
+        })), 
+        // unsubscribing from the switchMap on destroy aborts any in-flight compression
+        takeUntilDestroyed(), 
+        // switchMap has already discarded results of superseded selections, so state
+        // transitions made here always belong to the latest selection
+        tap(({ file, failed }) => {
+            if (this.destroyed)
+                return;
+            const control = this.control();
+            if (failed) {
+                this.progress.set(undefined);
+                this.setProcessingState('failed', `Unable to process "${failed.name}". Please try a different image.`, () => control.updateValueAndValidity());
+            }
+            else if (file) {
+                this.progress.set(undefined);
+                // only set the value if there is a file because resetToInitialValue sets the control value
+                // to initial value and clears the compressed image, so setting it to null here would undo that
+                this.setProcessingState('idle', null, () => control.setValue(file));
+                this.config().filesChanged?.(this.group(), file);
+            }
+            if (file || this.value()) {
+                control.markAsTouched();
+            }
+        }), map(({ file }) => file), shareReplay(1));
+        this.compressedImageUrlString$ = this.compressedFile$.pipe(
+        // null is emitted synchronously whenever a file starts (or no file is left) so that a
+        // resubscribing template (shareReplay replays the latest value) can never see the url of a
+        // previous file, or of one that has since been cleared or failed, while the new url is pending
+        switchMap((file) => file ? concat(of(null), from(this.toImageUrl(file))) : of(null)), shareReplay(1));
+        this.fileInputRef = viewChild('fileInput', ...(ngDevMode ? [{ debugName: "fileInputRef" }] : []));
+        /**
+         * Whether the hint is shown, i.e. the control is valid or has not been touched. Mirrors the control's
+         * state into a signal so that changes made asynchronously (e.g. when image processing finishes)
+         * re-render this OnPush/zoneless component.
+         */
+        this.hintVisible = signal(true, ...(ngDevMode ? [{ debugName: "hintVisible" }] : []));
+        const ngControl = this.ngControl;
+        if (this.ngControl != null) {
+            // Setting the value accessor directly (instead of using
+            // the providers) to avoid running into a circular import.
+            ngControl.valueAccessor = this;
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const control = this.control();
+        control.addValidators(this.imageProcessingValidator);
+        const updateHintVisible = () => this.hintVisible.set(control.valid || !control.touched);
+        updateHintVisible();
+        control.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(updateHintVisible);
+        this.destroyRef.onDestroy(() => {
+            this.destroyed = true;
+            this.inputImageFileSubject.complete();
+            control.removeValidators(this.imageProcessingValidator);
+            // a destroyed field must not leave the form invalid because of a processing/failed state
+            control.updateValueAndValidity();
+            if (this.processingState() !== 'idle') {
+                this.processingState.set('idle');
+                this.failureMessage.set(null);
+                this.config().processingStateChange?.('idle', this.group());
+            }
+        });
+        this.imageSrcUrl$ = combineLatest([
+            this.compressedImageUrlString$.pipe(startWith(null)),
+            // defer: start with the control's value at subscribe time, the template resubscribes after
+            // every processing phase and must not replay the value the control had at init
+            defer(() => this.control().valueChanges.pipe(startWith(this.control().value), map((controlValue) => {
+                if (!controlValue)
+                    return null;
+                if (controlValue instanceof File)
+                    return null;
+                return (this.config().mapInputValueToUrl?.(controlValue) ||
+                    controlValue);
+            })))
+        ]).pipe(map(([compressedImageUrlString, controlUrl]) => {
+            return compressedImageUrlString || controlUrl || null;
+        }));
+        this.disabled$ = this.config().disabledCallback
+            ? this.config().disabledCallback(this.group())
+            : of(false);
+    }
+    filesChanged(files) {
+        if (files && files.length > 0) {
+            const imageFile = files[0];
+            this.latestFile = imageFile;
+            this.progress.set(undefined);
+            this.processingFileName.set(imageFile.name);
+            // We clear the control here and flag the field as processing so that the control is invalid
+            // while compressing, the input pipeline will take care of setting the processed value
+            this.setProcessingState('processing', null, () => {
+                this.control().patchValue(null);
+                this.control().markAsTouched();
+            });
+            this.inputImageFileSubject.next(imageFile);
+        }
+    }
+    clearFileInput() {
+        this.latestFile = null;
+        this.inputImageFileSubject.next(null);
+        this.fileInputRef().nativeElement.value = '';
+        this.progress.set(undefined);
+        this.setProcessingState('idle', null, () => {
+            this.control().patchValue(null);
+            this.control().markAsTouched();
+        });
+    }
+    resetToInitialValue(initialValue) {
+        this.latestFile = null;
+        this.inputImageFileSubject.next(null);
+        this.progress.set(undefined);
+        this.setProcessingState('idle', null, () => this.control().patchValue(initialValue));
+    }
+    /**
+     * Transitions the processing state. `applyValue` updates the control (which revalidates it),
+     * so validity is current before `processingStateChange` is called. The callback only fires
+     * when the state actually changes.
+     */
+    setProcessingState(state, message, applyValue) {
+        const changed = this.processingState() !== state || this.failureMessage() !== message;
+        this.processingState.set(state);
+        this.failureMessage.set(message);
+        applyValue();
+        if (changed) {
+            this.config().processingStateChange?.(state, this.group());
+        }
+    }
+    writeValue(value) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ImageUploadFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: ImageUploadFieldComponent, isStandalone: true, selector: "crispr-image-upload-field", viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n\n  <mat-form-field floatLabel=\"always\"\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    <mat-label>{{config().label}}</mat-label>\n    <input [formControlName]=\"config().controlName\" matInput type=\"text\"/>\n    <input\n      #fileInput\n      type=\"file\"\n      [accept]=\"config().acceptedTypes\"\n      (change)=\"filesChanged($event.target.files)\"/>\n    <div class=\"ui-container\">\n\n      <div class=\"image-preview\" [style.height]=\"config().imagePreviewHeight\">\n        @if (processingState() === 'processing') {\n          <crispr-selected-file data-testid=\"image-processing\"\n            [color]=\"config().color === 'primary' ? 'accent' : 'primary'\"\n            [fileName]=\"(config().compressImage ? 'Compressing: ' : 'Processing: ') + processingFileName()\"\n            [showProgress]=\"true\"\n            [progress]=\"progress()\" />\n        } @else {\n          <!-- <img *ngIf=\"(initialUrlString$ | async) as initialUrlString;\" [src]=\"initialUrlString\" alt=\"\"> -->\n          @if (imageSrcUrl$ | async; as srcUrl) {\n            <img [src]=\"srcUrl\" alt=\"\">\n          } @else {\n            <div class=\"drop-container\"\n              [crisprFileDropzone]=\"!(disabled$ | async)\"\n              (fileDrop)=\"filesChanged($event)\">\n              <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n              <h2 class=\"mat-h2\">{{config().dropZoneText}}</h2>\n            </div>\n          }\n          @if (processingState() === 'failed') {\n            <p class=\"processing-failed mat-body-2\" role=\"alert\" data-testid=\"image-processing-failed\">\n              <mat-icon inline=\"true\">error</mat-icon>\n              {{failureMessage()}}\n            </p>\n          }\n        }\n\n      </div>\n\n\n\n    <!-- </ng-template> -->\n    @if (true) {\n      <div class=\"button-container\">\n        <button\n          mat-button\n          (click)=\"clearFileInput()\"\n          type=\"button\"\n          [disabled]=\"(disabled$ | async)\"\n          aria-label=\"Remove Selected File(s)\">\n          <mat-icon>delete</mat-icon>\n          {{config().clearFilesButtonText}}\n        </button>\n        @if (value()) {\n          <button\n            mat-button\n            (click)=\"resetToInitialValue(value())\"\n            type=\"button\"\n            [disabled]=\"(disabled$ | async)\"\n            aria-label=\"Remove Selected File(s)\">\n            <mat-icon>replay</mat-icon>\n            {{config().resetFilesButtonText}}\n          </button>\n        }\n        <button\n          mat-button\n          type=\"button\"\n          color=\"primary\"\n          [disabled]=\"(disabled$ | async)\"\n          (click)=\"fileInput.click()\"\n          [attr.aria-label]=\"config().controlName\">\n          <mat-icon>\n            camera\n          </mat-icon>\n          SELECT\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (config().hint && hintVisible()) {<mat-hint>{{config().hint}}</mat-hint>}\n\n</mat-form-field>\n\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:0}:host ::ng-deep .mat-mdc-form-field .mat-button-wrapper{display:flex;flex-direction:column;align-items:center;padding-top:8px}:host .ui-container{display:flex;flex-direction:column}:host .ui-container .image-preview{display:flex;flex-direction:column;align-content:space-between;justify-content:center;align-items:center;margin:8px 0;flex-grow:1}:host .ui-container .image-preview crispr-selected-file{width:100%}:host .ui-container .image-preview .drop-container{display:flex;box-sizing:border-box;flex-direction:column;align-items:center;border:3px dashed gray;height:100%;width:100%;align-content:center;justify-content:center;border-radius:8px}:host .ui-container .image-preview .drop-container .drop-icon{height:32px;width:32px;font-size:36px}:host .ui-container .image-preview .drop-container .mat-h2{margin:0}:host .ui-container .image-preview .processing-failed{display:flex;align-items:center;gap:4px;margin:8px 0 0;color:var(--mat-sys-error, #b3261e)}:host .ui-container .image-preview img{height:inherit;max-width:100%}:host .ui-container .button-container{display:flex;flex-direction:var(--image-upload-button-container-direction);justify-content:flex-end}:host .ui-container .button-container button{margin-left:8px}:host input{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: i3.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$1.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: "directive", type: FileDropzoneDirective, selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }, { kind: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: ImageUploadFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-image-upload-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FieldContainerComponent,
+                        ReactiveFormsModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        SelectedFileComponent,
+                        FileDropzoneDirective,
+                        ControlErrorContainerDirective,
+                        ControlErrorsDirective
+                    ], standalone: true, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n\n  <mat-form-field floatLabel=\"always\"\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    <mat-label>{{config().label}}</mat-label>\n    <input [formControlName]=\"config().controlName\" matInput type=\"text\"/>\n    <input\n      #fileInput\n      type=\"file\"\n      [accept]=\"config().acceptedTypes\"\n      (change)=\"filesChanged($event.target.files)\"/>\n    <div class=\"ui-container\">\n\n      <div class=\"image-preview\" [style.height]=\"config().imagePreviewHeight\">\n        @if (processingState() === 'processing') {\n          <crispr-selected-file data-testid=\"image-processing\"\n            [color]=\"config().color === 'primary' ? 'accent' : 'primary'\"\n            [fileName]=\"(config().compressImage ? 'Compressing: ' : 'Processing: ') + processingFileName()\"\n            [showProgress]=\"true\"\n            [progress]=\"progress()\" />\n        } @else {\n          <!-- <img *ngIf=\"(initialUrlString$ | async) as initialUrlString;\" [src]=\"initialUrlString\" alt=\"\"> -->\n          @if (imageSrcUrl$ | async; as srcUrl) {\n            <img [src]=\"srcUrl\" alt=\"\">\n          } @else {\n            <div class=\"drop-container\"\n              [crisprFileDropzone]=\"!(disabled$ | async)\"\n              (fileDrop)=\"filesChanged($event)\">\n              <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n              <h2 class=\"mat-h2\">{{config().dropZoneText}}</h2>\n            </div>\n          }\n          @if (processingState() === 'failed') {\n            <p class=\"processing-failed mat-body-2\" role=\"alert\" data-testid=\"image-processing-failed\">\n              <mat-icon inline=\"true\">error</mat-icon>\n              {{failureMessage()}}\n            </p>\n          }\n        }\n\n      </div>\n\n\n\n    <!-- </ng-template> -->\n    @if (true) {\n      <div class=\"button-container\">\n        <button\n          mat-button\n          (click)=\"clearFileInput()\"\n          type=\"button\"\n          [disabled]=\"(disabled$ | async)\"\n          aria-label=\"Remove Selected File(s)\">\n          <mat-icon>delete</mat-icon>\n          {{config().clearFilesButtonText}}\n        </button>\n        @if (value()) {\n          <button\n            mat-button\n            (click)=\"resetToInitialValue(value())\"\n            type=\"button\"\n            [disabled]=\"(disabled$ | async)\"\n            aria-label=\"Remove Selected File(s)\">\n            <mat-icon>replay</mat-icon>\n            {{config().resetFilesButtonText}}\n          </button>\n        }\n        <button\n          mat-button\n          type=\"button\"\n          color=\"primary\"\n          [disabled]=\"(disabled$ | async)\"\n          (click)=\"fileInput.click()\"\n          [attr.aria-label]=\"config().controlName\">\n          <mat-icon>\n            camera\n          </mat-icon>\n          SELECT\n        </button>\n      </div>\n    }\n  </div>\n\n  @if (config().hint && hintVisible()) {<mat-hint>{{config().hint}}</mat-hint>}\n\n</mat-form-field>\n\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix{padding-top:0}:host ::ng-deep .mat-mdc-form-field .mat-button-wrapper{display:flex;flex-direction:column;align-items:center;padding-top:8px}:host .ui-container{display:flex;flex-direction:column}:host .ui-container .image-preview{display:flex;flex-direction:column;align-content:space-between;justify-content:center;align-items:center;margin:8px 0;flex-grow:1}:host .ui-container .image-preview crispr-selected-file{width:100%}:host .ui-container .image-preview .drop-container{display:flex;box-sizing:border-box;flex-direction:column;align-items:center;border:3px dashed gray;height:100%;width:100%;align-content:center;justify-content:center;border-radius:8px}:host .ui-container .image-preview .drop-container .drop-icon{height:32px;width:32px;font-size:36px}:host .ui-container .image-preview .drop-container .mat-h2{margin:0}:host .ui-container .image-preview .processing-failed{display:flex;align-items:center;gap:4px;margin:8px 0 0;color:var(--mat-sys-error, #b3261e)}:host .ui-container .image-preview img{height:inherit;max-width:100%}:host .ui-container .button-container{display:flex;flex-direction:var(--image-upload-button-container-direction);justify-content:flex-end}:host .ui-container .button-container button{margin-left:8px}:host input{position:absolute;max-height:0;visibility:hidden}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fileInputRef: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
+
+var index$a = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ImageUploadFieldComponent: ImageUploadFieldComponent
+});
+
+/* eslint-disable @nx/enforce-module-boundaries */
+class InputFieldComponent extends CrisprControlComponent {
+    constructor() {
+        super();
+        this.defaultConfig = { inputType: 'text' };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: InputFieldComponent, isStandalone: true, selector: "crispr-input-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  <mat-form-field [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    <mat-label>\n      {{config().label}}\n    </mat-label>\n    <input [type]=\"config().inputType\" matInput [placeholder]=\"config().placeholder\"\n      [formControlName]=\"config().controlName\" [min]=\"config().min\" [max]=\"config().max\"\n      [maxlength]=\"config().maxLength\" [step]=\"config().step\" [autofocus]=\"config().autofocus\"\n      [pattern]=\"config().pattern\" [spellcheck]=\"config().spellcheck\" [autocomplete]=\"config().autoComplete\"\n      [autocapitalize]=\"config().autoCapitalize\">\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().info) {<crispr-info matSuffix [info]=\"config().info\" />}\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n\n\n</crispr-field-container>", styles: ["crispr-info[matSuffix]{margin-right:.75em}\n"], dependencies: [{ kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { 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: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { 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: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "ngmodule", type: MatIconModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: InputFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-input-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        InfoComponent,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        ControlErrorContainerDirective,
+                        ControlErrorsDirective,
+                        MatIconModule
+                    ], template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  <mat-form-field [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    <mat-label>\n      {{config().label}}\n    </mat-label>\n    <input [type]=\"config().inputType\" matInput [placeholder]=\"config().placeholder\"\n      [formControlName]=\"config().controlName\" [min]=\"config().min\" [max]=\"config().max\"\n      [maxlength]=\"config().maxLength\" [step]=\"config().step\" [autofocus]=\"config().autofocus\"\n      [pattern]=\"config().pattern\" [spellcheck]=\"config().spellcheck\" [autocomplete]=\"config().autoComplete\"\n      [autocapitalize]=\"config().autoCapitalize\">\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().info) {<crispr-info matSuffix [info]=\"config().info\" />}\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n\n\n</crispr-field-container>", styles: ["crispr-info[matSuffix]{margin-right:.75em}\n"] }]
+        }], ctorParameters: () => [] });
+
+var index$9 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    InputFieldComponent: InputFieldComponent
+});
+
+const defaultConfig$4 = {
+    debounceTime: 500,
+};
+class MapFieldComponent extends CrisprControlComponent {
+    constructor() {
+        super(...arguments);
+        /**
+       * The overlay is positioned to align the top-right corner with the origin's bottom-right corner,
+       * and the top-left corner with the origin's bottom-left corner.
+       */
+        this.overlayPositions = [
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'start',
+                overlayY: 'top',
+                offsetY: -26
+            },
+            {
+                originX: 'end',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            }
+        ];
+        this.geoCoder = inject(MapGeocoder);
+        this.infoWindow = viewChild(MapInfoWindow, ...(ngDevMode ? [{ debugName: "infoWindow" }] : []));
+        this.selectedMarker = signal(null, ...(ngDevMode ? [{ debugName: "selectedMarker" }] : []));
+        this.mapOpen = signal(false, ...(ngDevMode ? [{ debugName: "mapOpen" }] : []));
+        this.defaultConfig = defaultConfig$4;
+        this.locationControl = new FormControl(this.config()?.location);
+        this.locationGroup = new FormGroup({
+            location: this.locationControl,
+        });
+        this.locationConfig = {
+            controlType: ControlType.AUTOCOMPLETE,
+            controlName: 'location',
+            label: 'Location',
+            placeholder: 'Enter a location',
+            options: async (_group, searchTerm) => {
+                if (searchTerm) {
+                    return new Promise((resolve) => {
+                        const request = {
+                            includedPrimaryTypes: [
+                                'postal_code',
+                                'administrative_area_level_2',
+                                'administrative_area_level_3',
+                            ],
+                            language: "en-US",
+                            region: "us",
+                            ...this.config().searchAutocompleteRequest,
+                            input: searchTerm,
+                        };
+                        const options = google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request)
+                            .then((response) => response.suggestions.map(suggestion => ({
+                            value: suggestion,
+                            label: suggestion.placePrediction.text.text,
+                        })));
+                        resolve(options);
+                    });
+                }
+                return [];
+            }
+        };
+        this.inputCenter = this.locationControl.valueChanges.pipe(filter(value => !!value && typeof value !== 'string'), switchMap$1((value) => {
+            const request = {
+                address: value.placePrediction.text.text,
+            };
+            return this.geoCoder.geocode(request);
+        }), map$1((res) => {
+            const { geometry } = res.results?.[0] || {};
+            const { location } = geometry || {};
+            const center = location?.toJSON();
+            return center;
+        }), startWith$1(this.config()?.center || undefined));
+        this.currentMap = new BehaviorSubject(null);
+        this.displayValue = toSignal(toObservable(this.control).pipe(switchMap$1(control => control
+            ? control.valueChanges.pipe(startWith$1(control.value))
+            : of('')), map$1(value => this.getDisplay(value))));
+        this.currentMarkers = toSignal(this.currentMap.pipe(debounceTime$1(500), switchMap$1((map) => {
+            return this.config()?.markers?.(map, this.group()) || of([]);
+        })));
+    }
+    /**
+     * `mapInitialized` emits the native `google.maps.Map`, but `markers`/`onMove` are typed to receive the
+     * `GoogleMap` component, so the template passes its `#map` ref instead.
+     */
+    onMapInit(map) {
+        this.currentMap.next(map);
+    }
+    onMarkerClick(clickedMarker) {
+        const clickedPosition = clickedMarker.getPosition();
+        if (!clickedPosition)
+            return;
+        // A simple title match is less prone to float precision issues than position
+        const originalMarker = this.currentMarkers().find(m => m.title === clickedMarker.getTitle());
+        if (originalMarker) {
+            this.selectedMarker.set(originalMarker);
+            this.infoWindow().open(clickedMarker);
+        }
+    }
+    selectMarker(marker) {
+        const valueToSet = marker.value || marker.title;
+        this.control().setValue(valueToSet);
+        this.closeMap();
+        this.infoWindow()?.close();
+    }
+    onMove(map, group) {
+        this.config()?.onMove?.(map, group);
+        this.currentMap.next(map);
+    }
+    async onSelectLocation(suggestion) {
+        if (!google.maps.places || !suggestion.place_id)
+            return;
+        const place = new google.maps.places.Place({ id: suggestion.place_id });
+        // TODO: the fetched location is not used yet, it should recenter the map on the selected suggestion
+        await place.fetchFields({ fields: ['location'] });
+    }
+    openMap() {
+        this.mapOpen.set(true);
+    }
+    closeMap() {
+        this.mapOpen.set(false);
+    }
+    getDisplay(value) {
+        if (typeof value !== 'object' || value === null) {
+            return value == null ? '' : String(value);
+        }
+        const record = value;
+        const displayKey = this.config()?.valueDisplayKey;
+        if (displayKey && record[displayKey]) {
+            return String(record[displayKey]);
+        }
+        // Attempt to find a sensible display property
+        return String(record['name'] || record['title'] || 'Selected Location');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MapFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: MapFieldComponent, isStandalone: true, selector: "crispr-map", viewQueries: [{ propertyName: "infoWindow", first: true, predicate: MapInfoWindow, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n\n  <mat-form-field [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\"\n    #trigger=\"cdkOverlayOrigin\" (click)=\"openMap()\" cdkOverlayOrigin>\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <input matInput [formControlName]=\"config().controlName\" style=\"display:none\">\n    <input matInput readonly [value]=\"displayValue() || ''\" [placeholder]=\"config().placeholder\">\n  </mat-form-field>\n\n  <ng-template cdkConnectedOverlay (overlayOutsideClick)=\"closeMap()\" [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"mapOpen()\" [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n    [cdkConnectedOverlayMinWidth]=\"trigger.elementRef.nativeElement.offsetWidth\" (detach)=\"closeMap()\"\n    (backdropClick)=\"closeMap()\">\n    <crispr-autocomplete-field class=\"search-field\" [config]=\"locationConfig\" [group]=\"locationGroup\"\n      (valueChanges)=\"onSelectLocation($event)\" aria-label=\"Search for a location\" />\n    <google-map [center]=\"(inputCenter | async) || config().center\" [zoom]=\"11\" [options]=\"config().options\"\n      (mapInitialized)=\"onMapInit(map)\" (idle)=\"onMove(map, group())\" #map>\n\n      @for (marker of currentMarkers() || []; track $index) {\n      <map-marker #markerRef=\"mapMarker\" [position]=\"marker.position\" [title]=\"marker.title\"\n        (mapClick)=\"onMarkerClick(markerRef)\" />\n\n      }\n      <map-info-window>\n        @if(selectedMarker(); as marker) {\n        <div class=\"info-window-content\">\n          <p>{{ marker.title }}</p>\n          <button mat-button (click)=\"selectMarker(marker)\">Select</button>\n        </div>\n        }\n      </map-info-window>\n\n    </google-map>\n  </ng-template>\n</crispr-field-container>", styles: [":host .marker{background-color:#0ff}.search-field{position:absolute;top:.4rem;left:.4rem;z-index:1000}\n"], dependencies: [{ kind: "component", type: GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: MapInfoWindow, selector: "map-info-window", inputs: ["options", "position"], outputs: ["closeclick", "contentChanged", "domready", "positionChanged", "zindexChanged", "infoWindowInitialized"], exportAs: ["mapInfoWindow"] }, { kind: "directive", type: MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }, { 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: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: 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: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: AutocompleteFieldComponent, selector: "crispr-autocomplete-field" }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "component", type: 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: OverlayModule }, { kind: "directive", type: i2$5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MapFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-map', imports: [
+                        GoogleMap,
+                        MapInfoWindow,
+                        MapMarker,
+                        ReactiveFormsModule,
+                        MatFormField,
+                        MatInput,
+                        MatLabel,
+                        AsyncPipe,
+                        AutocompleteFieldComponent,
+                        FieldContainerComponent,
+                        MatButton,
+                        OverlayModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n\n  <mat-form-field [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\"\n    #trigger=\"cdkOverlayOrigin\" (click)=\"openMap()\" cdkOverlayOrigin>\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <input matInput [formControlName]=\"config().controlName\" style=\"display:none\">\n    <input matInput readonly [value]=\"displayValue() || ''\" [placeholder]=\"config().placeholder\">\n  </mat-form-field>\n\n  <ng-template cdkConnectedOverlay (overlayOutsideClick)=\"closeMap()\" [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"mapOpen()\" [cdkConnectedOverlayPositions]=\"overlayPositions\"\n    [cdkConnectedOverlayWidth]=\"trigger.elementRef.nativeElement.offsetWidth\"\n    [cdkConnectedOverlayMinWidth]=\"trigger.elementRef.nativeElement.offsetWidth\" (detach)=\"closeMap()\"\n    (backdropClick)=\"closeMap()\">\n    <crispr-autocomplete-field class=\"search-field\" [config]=\"locationConfig\" [group]=\"locationGroup\"\n      (valueChanges)=\"onSelectLocation($event)\" aria-label=\"Search for a location\" />\n    <google-map [center]=\"(inputCenter | async) || config().center\" [zoom]=\"11\" [options]=\"config().options\"\n      (mapInitialized)=\"onMapInit(map)\" (idle)=\"onMove(map, group())\" #map>\n\n      @for (marker of currentMarkers() || []; track $index) {\n      <map-marker #markerRef=\"mapMarker\" [position]=\"marker.position\" [title]=\"marker.title\"\n        (mapClick)=\"onMarkerClick(markerRef)\" />\n\n      }\n      <map-info-window>\n        @if(selectedMarker(); as marker) {\n        <div class=\"info-window-content\">\n          <p>{{ marker.title }}</p>\n          <button mat-button (click)=\"selectMarker(marker)\">Select</button>\n        </div>\n        }\n      </map-info-window>\n\n    </google-map>\n  </ng-template>\n</crispr-field-container>", styles: [":host .marker{background-color:#0ff}.search-field{position:absolute;top:.4rem;left:.4rem;z-index:1000}\n"] }]
+        }], propDecorators: { infoWindow: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MapInfoWindow), { isSignal: true }] }] } });
+
+var index$8 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    MapFieldComponent: MapFieldComponent
+});
+
+/* eslint-disable @nx/enforce-module-boundaries */
+class RadioFieldComponent extends CrisprControlComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = {};
+        /** The radio group's control, typed for the `[formControl]` binding. */
+        this.radioControl = computed(() => this.control(), ...(ngDevMode ? [{ debugName: "radioControl" }] : []));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // options$ can be passed as an array, promise that resolves array, or observable that resolves array
+        // this functions accounts for all possibilities and converts to observable that resolves array
+        this.options$ = observablifyOptions(this.config().options, this.group());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: RadioFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: RadioFieldComponent, isStandalone: true, selector: "crispr-radio-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n\n  <mat-radio-group\n    [attr.data-testid]=\"testId()\"\n    [formControl]=\"radioControl()\"\n    [color]=\"config().color\">\n    @for (option of options$ | async; track option) {\n      <mat-radio-button class=\"example-radio-button\" [value]=\"option.value\">\n        {{option.label}}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</crispr-field-container>\n", styles: ["mat-radio-button{padding:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: RadioFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-radio-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatRadioModule,
+                        ControlErrorsDirective
+                    ], standalone: true, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n\n  <mat-radio-group\n    [attr.data-testid]=\"testId()\"\n    [formControl]=\"radioControl()\"\n    [color]=\"config().color\">\n    @for (option of options$ | async; track option) {\n      <mat-radio-button class=\"example-radio-button\" [value]=\"option.value\">\n        {{option.label}}\n      </mat-radio-button>\n    }\n  </mat-radio-group>\n</crispr-field-container>\n", styles: ["mat-radio-button{padding:12px}\n"] }]
+        }] });
+
+var index$7 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    RadioFieldComponent: RadioFieldComponent
+});
+
+/* eslint-disable @nx/enforce-module-boundaries */
+class SelectFieldComponent extends CrisprControlComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = {
+            enableToggleAll: false,
+            color: 'primary',
+        };
+        this.allSelected = signal(false, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
+        this.selectField = viewChild('selectField', ...(ngDevMode ? [{ debugName: "selectField" }] : []));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // options$ can be passed as an array, promise that resolves array, or observable that resolves array
+        // this functions accounts for all possibilities and converts to observable that resolves array
+        this.options$ = observablifyOptions(this.config().options, this.group()).pipe(tap(() => {
+            // mat-select.writeValue() runs before async options render, so _setSelectionByValue
+            // finds no matches. Re-apply the value after options are in the DOM.
+            afterNextRender(() => {
+                const ctrl = this.control();
+                if (ctrl?.value != null) {
+                    ctrl.setValue(ctrl.value, { emitEvent: false });
+                }
+            }, { injector: this.injector });
+        }));
+    }
+    ngAfterViewInit() {
+        if (this.config().multiple &&
+            this.config().enableToggleAll &&
+            this.selectField().options?.length === this.value()?.length) {
+            this.allSelected.set(true);
+        }
+    }
+    toggleAll(isSelected) {
+        if (isSelected) {
+            this.selectField().options.forEach((option) => option.deselect());
+        }
+        else {
+            this.selectField().options.forEach((option) => option.select());
+        }
+        this.allSelected.update((selected) => !selected);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SelectFieldComponent, isStandalone: true, selector: "crispr-select-field", viewQueries: [{ propertyName: "selectField", first: true, predicate: ["selectField"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n\n  <mat-form-field\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <mat-select\n      #selectField\n      [formControlName]=\"config().controlName\"\n      [placeholder]=\"config().placeholder\"\n      [multiple]=\"config().multiple\">\n\n      @if (config()?.multiple && config().enableToggleAll) {\n        <mat-checkbox\n          [color]=\"config().color\"\n          [checked]=\"allSelected()\"\n          (click)=\"toggleAll(allSelected())\">\n          Select All\n        </mat-checkbox>\n      }\n      @for (option of options$ | async; track option) {\n        <mat-option\n          [value]=\"option.value\">\n          <crispr-option [option]=\"option\" />\n        </mat-option>\n      }\n\n    </mat-select>\n\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().info) {<crispr-info matSuffix [info]=\"config().info\" />}\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}crispr-info[matSuffix]{margin-right:.75em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatSelectModule }, { 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: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SelectFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-select-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        OptionComponent,
+                        MatCheckboxModule,
+                        MatSelectModule,
+                        ReactiveFormsModule,
+                        ControlErrorContainerDirective,
+                        ControlErrorsDirective,
+                        FieldContainerComponent,
+                        MatFormFieldModule
+                    ], standalone: true, template: "<crispr-field-container\n  [config]=\"config()\"\n  [group]=\"group()\">\n\n  <mat-form-field\n    [attr.data-testid]=\"testId()\"\n    [color]=\"config().color\"\n    [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <mat-select\n      #selectField\n      [formControlName]=\"config().controlName\"\n      [placeholder]=\"config().placeholder\"\n      [multiple]=\"config().multiple\">\n\n      @if (config()?.multiple && config().enableToggleAll) {\n        <mat-checkbox\n          [color]=\"config().color\"\n          [checked]=\"allSelected()\"\n          (click)=\"toggleAll(allSelected())\">\n          Select All\n        </mat-checkbox>\n      }\n      @for (option of options$ | async; track option) {\n        <mat-option\n          [value]=\"option.value\">\n          <crispr-option [option]=\"option\" />\n        </mat-option>\n      }\n\n    </mat-select>\n\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().info) {<crispr-info matSuffix [info]=\"config().info\" />}\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}crispr-info[matSuffix]{margin-right:.75em}\n"] }]
+        }], propDecorators: { selectField: [{ type: i0.ViewChild, args: ['selectField', { isSignal: true }] }] } });
+
+var index$6 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SelectFieldComponent: SelectFieldComponent
+});
+
+/* eslint-disable @nx/enforce-module-boundaries */
+const defaultConfig$3 = {
+    displayLimits: true,
+    displayWith: (val) => val,
+};
+class SliderFieldComponent extends CrisprControlComponent {
+    constructor() {
+        super();
+        this.defaultConfig = defaultConfig$3;
+        /** `MatSlider` expects the label as a string, the config allows numbers too. */
+        this.displayWith = computed(() => {
+            const displayWith = this.config().displayWith;
+            return (value) => `${displayWith ? displayWith(value) : value}`;
+        }, ...(ngDevMode ? [{ debugName: "displayWith" }] : []));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SliderFieldComponent, isStandalone: true, selector: "crispr-slider-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  @if (config().label) {\n  <label>\n    {{config().label}}\n    @if (config().info) {\n    <crispr-info [info]=\"config().info\" />\n    }\n  </label>\n  }\n  <div class=\"slider-container\">\n    @if (config().displayLimits) {\n    <span>\n      {{config().min}}\n    </span>\n    }\n    <mat-slider [attr.data-testid]=\"testId()\" [discrete]=\"config().discrete\"\n      [displayWith]=\"displayWith()\" class=\"example-margin\" [formGroup]=\"group()\" [max]=\"config().max\"\n      [min]=\"config().min\" [step]=\"config().step\">\n      <input matSliderThumb [formControlName]=\"config().controlName\">\n    </mat-slider>\n    @if (config().displayLimits) {\n    <span>\n      {{config().max}}\n    </span>\n    }\n  </div>\n\n</crispr-field-container>", styles: [".slider-container{display:flex;align-items:center}.slider-container mat-slider{flex:1}\n"], dependencies: [{ kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { 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: MatSliderModule }, { kind: "component", type: i2$7.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i2$7.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SliderFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-slider-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        InfoComponent,
+                        FieldContainerComponent,
+                        ReactiveFormsModule,
+                        MatSliderModule
+                    ], template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  @if (config().label) {\n  <label>\n    {{config().label}}\n    @if (config().info) {\n    <crispr-info [info]=\"config().info\" />\n    }\n  </label>\n  }\n  <div class=\"slider-container\">\n    @if (config().displayLimits) {\n    <span>\n      {{config().min}}\n    </span>\n    }\n    <mat-slider [attr.data-testid]=\"testId()\" [discrete]=\"config().discrete\"\n      [displayWith]=\"displayWith()\" class=\"example-margin\" [formGroup]=\"group()\" [max]=\"config().max\"\n      [min]=\"config().min\" [step]=\"config().step\">\n      <input matSliderThumb [formControlName]=\"config().controlName\">\n    </mat-slider>\n    @if (config().displayLimits) {\n    <span>\n      {{config().max}}\n    </span>\n    }\n  </div>\n\n</crispr-field-container>", styles: [".slider-container{display:flex;align-items:center}.slider-container mat-slider{flex:1}\n"] }]
+        }], ctorParameters: () => [] });
+
+var index$5 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SliderFieldComponent: SliderFieldComponent
+});
+
+/* eslint-disable @nx/enforce-module-boundaries */
+const defaultConfig$2 = { rows: 5 };
+class TextareaFieldComponent extends CrisprControlComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$2;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: TextareaFieldComponent, isStandalone: true, selector: "crispr-textarea-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  <mat-form-field [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <textarea [rows]=\"config().rows\" matInput [placeholder]=\"config().placeholder\"\n      [formControlName]=\"config().controlName\">\n    </textarea>\n    @if (config().info) {<crispr-info [info]=\"config().info\" />}\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().hint && control().valid) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n\n</crispr-field-container>", styles: ["crispr-info{position:absolute;top:.75em;right:-.25em}\n"], dependencies: [{ kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { 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: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { 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: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: ControlErrorsDirective, selector: "[formControl], [formControlName]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: TextareaFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-textarea-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        InfoComponent,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        ControlErrorContainerDirective,
+                        ControlErrorsDirective
+                    ], standalone: true, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  <mat-form-field [attr.data-testid]=\"testId()\" [color]=\"config().color\" [appearance]=\"config().appearance\"\n    [formGroup]=\"group()\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <textarea [rows]=\"config().rows\" matInput [placeholder]=\"config().placeholder\"\n      [formControlName]=\"config().controlName\">\n    </textarea>\n    @if (config().info) {<crispr-info [info]=\"config().info\" />}\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().hint && control().valid) {<mat-hint>{{config().hint}}</mat-hint>}\n\n  </mat-form-field>\n\n</crispr-field-container>", styles: ["crispr-info{position:absolute;top:.75em;right:-.25em}\n"] }]
+        }] });
+
+var index$4 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TextareaFieldComponent: TextareaFieldComponent
+});
+
+/* eslint-disable @nx/enforce-module-boundaries */
+const defaultConfig$1 = {};
+class UnitConversionFieldComponent extends CrisprControlComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$1;
+        this.displayValueControl = new FormControl();
+        this.unitSelectControl = new FormControl();
+    }
+    ngOnInit() {
+        const config = this.config();
+        super.ngOnInit();
+        // TODO: Validators need work. validation is tricky because the input needs to be validated against but the validator will compare against the controls value
+        // this.displayValueControl.setValidators(this.config.validators);
+        const controlValuePipeline = [
+            this.displayValueControl.valueChanges.pipe(startWith(this.displayValueControl.value))
+        ];
+        // setup all required pieces when showing a field for selecting units
+        if (config.showUnitSelect === true) {
+            this.unitOptions$ = observablifyOptions(config.selectableUnits, this.group());
+            controlValuePipeline.push(this.unitSelectControl.valueChanges.pipe(startWith(config?.initialDisplayUnit || null)));
+            this.unitSelectControl.setValue(config?.initialDisplayUnit || null);
+        }
+        this.transformationSubscription = combineLatest(controlValuePipeline).subscribe(([displayValue, unitValue]) => {
+            const computedValue = this.config().storedValueConversion(displayValue, unitValue);
+            this.control().setValue(computedValue);
+        });
+    }
+    ngOnDestroy() {
+        this.transformationSubscription.unsubscribe();
+    }
+    setInitialDisplayValue(storedValue, unit) {
+        const initialDisplayValue = this.config().initialDisplayValueConversion(storedValue || null, unit);
+        this.displayValueControl.setValue(initialDisplayValue);
+    }
+    /**
+     * We override the 'setControlValue' we inherited from crisprControlMixin and add our custom logic,
+     * This function gets called onInit because were object oriented. it's so great, so great that I'm
+     * typing a paragraph to explain what the hell is going on...
+     * @param value the initial value for the control passed down from the form components input
+     */
+    setControlValue(value) {
+        const config = this.config();
+        const initialUnitValue = config.showUnitSelect
+            ? config?.initialDisplayUnit
+            : null;
+        this.setInitialDisplayValue(value, initialUnitValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: UnitConversionFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: UnitConversionFieldComponent, isStandalone: true, selector: "crispr-unit-conversion-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  <mat-form-field [attr.data-testid]=\"testId()\" [style.width.%]=\"config().showUnitSelect ? 60 : 100\" class=\"number-field\" [color]=\"config().color\"\n    [appearance]=\"config().appearance\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <input type=\"number\" matInput [formControl]=\"displayValueControl\" [placeholder]=\"config().placeholder\"\n      [min]=\"config().min\" [max]=\"config().max\" [step]=\"config().step\" [autofocus]=\"config().autofocus\">\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().info) {<crispr-info matSuffix [info]=\"config().info\" />}\n  </mat-form-field>\n\n  @if (config().showUnitSelect) {\n  <mat-form-field [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\" class=\"unit-field\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <mat-select #selectField [formControl]=\"unitSelectControl\">\n      @for (option of unitOptions$ | async; track option) {\n      <mat-option [value]=\"option.value\">\n        <crispr-option [option]=\"option\" />\n      </mat-option>\n      }\n    </mat-select>\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n  </mat-form-field>\n  }\n\n</crispr-field-container>", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.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: 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: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: UnitConversionFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-unit-conversion-field', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        InfoComponent,
+                        OptionComponent,
+                        ReactiveFormsModule,
+                        FieldContainerComponent,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatOptionModule,
+                        ControlErrorContainerDirective,
+                        ControlErrorsDirective
+                    ], standalone: true, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  <mat-form-field [attr.data-testid]=\"testId()\" [style.width.%]=\"config().showUnitSelect ? 60 : 100\" class=\"number-field\" [color]=\"config().color\"\n    [appearance]=\"config().appearance\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <input type=\"number\" matInput [formControl]=\"displayValueControl\" [placeholder]=\"config().placeholder\"\n      [min]=\"config().min\" [max]=\"config().max\" [step]=\"config().step\" [autofocus]=\"config().autofocus\">\n    @if (config().fieldSuffix) {<span matSuffix>{{config().fieldSuffix}}</span>}\n    @if (config().info) {<crispr-info matSuffix [info]=\"config().info\" />}\n  </mat-form-field>\n\n  @if (config().showUnitSelect) {\n  <mat-form-field [color]=\"config().color\" [appearance]=\"config().appearance\" [formGroup]=\"group()\" class=\"unit-field\">\n    @if (config().label) {<mat-label>{{config().label}}</mat-label>}\n    <mat-select #selectField [formControl]=\"unitSelectControl\">\n      @for (option of unitOptions$ | async; track option) {\n      <mat-option [value]=\"option.value\">\n        <crispr-option [option]=\"option\" />\n      </mat-option>\n      }\n    </mat-select>\n    @if (config().hint && (control().valid || !control().touched)) {<mat-hint>{{config().hint}}</mat-hint>}\n  </mat-form-field>\n  }\n\n</crispr-field-container>", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"] }]
+        }] });
+
+var index$3 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    UnitConversionFieldComponent: UnitConversionFieldComponent
+});
+
+var index$2 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AutocompleteChiplistFieldComponent: AutocompleteChiplistFieldComponent,
+    AutocompleteFieldComponent: AutocompleteFieldComponent,
+    ButtonComponent: ButtonComponent,
+    CheckboxFieldComponent: CheckboxFieldComponent,
+    DatepickerFieldComponent: DatepickerFieldComponent,
+    DividerComponent: DividerComponent,
+    FieldContainerComponent: FieldContainerComponent,
+    FileDropzoneDirective: FileDropzoneDirective,
+    FileUploadFieldComponent: FileUploadFieldComponent,
+    HeadingComponent: HeadingComponent,
+    ImageUploadFieldComponent: ImageUploadFieldComponent,
+    InfoComponent: InfoComponent,
+    InputFieldComponent: InputFieldComponent,
+    MapFieldComponent: MapFieldComponent,
+    OptionComponent: OptionComponent,
+    RadioFieldComponent: RadioFieldComponent,
+    SelectFieldComponent: SelectFieldComponent,
+    SelectedFileComponent: SelectedFileComponent,
+    SliderFieldComponent: SliderFieldComponent,
+    TextareaFieldComponent: TextareaFieldComponent,
+    UnitConversionFieldComponent: UnitConversionFieldComponent
+});
+
+/**
+ * @deprecated Import the standalone pieces (CrisprFormComponent, FieldContainerComponent, …) directly.
+ * This module will be removed in the next major version.
+ */
+class CrisprFormsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormsModule, imports: [CrisprFormComponent, FieldContainerComponent], exports: [CrisprFormComponent, FieldContainerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormsModule, imports: [CrisprFormComponent, FieldContainerComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CrisprFormComponent, FieldContainerComponent],
+                    exports: [CrisprFormComponent, FieldContainerComponent],
+                }]
+        }] });
+
+class CrisprDisplayFieldDirective {
+    constructor() {
+        this.container = inject(ViewContainerRef);
+        this.group = input(...(ngDevMode ? [undefined, { debugName: "group" }] : []));
+        this.value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.component = input(...(ngDevMode ? [undefined, { debugName: "component" }] : []));
+        this.index = input(...(ngDevMode ? [undefined, { debugName: "index" }] : []));
+        effect(() => {
+            this.updateComponentValue(this.value());
+        });
+    }
+    async ngOnInit() {
+        if (this.component()) {
+            const componentRef = this.container.createComponent(this.component());
+            this.componentRef = componentRef;
+            this.componentInstance = componentRef.instance;
+            this.componentInstance.index = this.index();
+            this.updateComponentValue(this.value());
+        }
+    }
+    updateComponentValue(value) {
+        if (!this.componentRef)
+            return;
+        this.componentRef.setInput('value', value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprDisplayFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: CrisprDisplayFieldDirective, isStandalone: true, selector: "[crisprDisplayField]", inputs: { group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprDisplayFieldDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[crisprDisplayField]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], component: [{ type: i0.Input, args: [{ isSignal: true, alias: "component", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }] } });
+
+const defaultConfig = {
+    addButtonLabel: 'ADD ITEM',
+    minListLength: 1,
+};
+class FormGroupListComponent extends CrisprControlComponent {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig;
+        /**
+         * By setting this to true when adding/removing items from array,
+         * we can block original values from overwriting form values
+         * */
+        this.blockValue = signal(false, ...(ngDevMode ? [{ debugName: "blockValue" }] : []));
+        this.selectedIndex = signal(null, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : []));
+        /** The item groups of the list's form array, typed for the template bindings. */
+        this.itemGroups = computed(() => this.control()?.controls, ...(ngDevMode ? [{ debugName: "itemGroups" }] : []));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // TODO: this is required to ngFor of controls in template, must be a better way
+    }
+    setControlValue(values) {
+        const formArray = this.control();
+        if (formArray) {
+            if (values?.length > 0) {
+                // clear any existing values so that new values don't concatenate onto the old
+                const currentValues = formArray.value;
+                if (currentValues.length) {
+                    formArray.clear();
+                }
+                values.forEach((value) => this.addGroup(value));
+            }
+            else if (this.config().displayInitialItem) {
+                this.addGroup();
+            }
+        }
+    }
+    clickDelete(index) {
+        this.blockValue.set(true);
+        this.deleteGroup(index);
+    }
+    clickAdd() {
+        this.blockValue.set(true);
+        this.addGroup();
+    }
+    addGroup(value = null) {
+        const formArray = this.control();
+        formArray.push(createControlForType(this.config().itemConfig, value));
+    }
+    deleteGroup(index) {
+        const formArray = this.control();
+        formArray.removeAt(index);
+    }
+    clickEditItem(index) {
+        this.selectedIndex.set(index);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FormGroupListComponent, deps: null, 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 itemGroups(); 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()?.[i] | initialControlValue : field\"\n        [config]=\"field\" [group]=\"itemControl\" [testIdPrefix]=\"testId() + '[' + i + ']'\" />\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: i3.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: i3.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", "testIdPrefix", "value"] }, { kind: "directive", type: CrisprDisplayFieldDirective, selector: "[crisprDisplayField]", inputs: ["group", "value", "component", "index"] }, { kind: "directive", type: ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: FormGroupListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-form-group-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        MatButtonModule,
+                        MatIconModule,
+                        FieldContainerComponent,
+                        ReactiveFormsModule,
+                        CrisprFieldDirective,
+                        CrisprDisplayFieldDirective,
+                        InitialControlValuePipe,
+                        ControlErrorContainerDirective
+                    ], 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 itemGroups(); 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()?.[i] | initialControlValue : field\"\n        [config]=\"field\" [group]=\"itemControl\" [testIdPrefix]=\"testId() + '[' + i + ']'\" />\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"] }]
+        }] });
+
+var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FormGroupListComponent: FormGroupListComponent
+});
+
+class SubGroupComponent extends CrisprControlComponent {
+    constructor() {
+        super(...arguments);
+        /** The sub group's control, typed for the nested `[group]` binding. */
+        this.subGroup = computed(() => this.control(), ...(ngDevMode ? [{ debugName: "subGroup" }] : []));
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", type: SubGroupComponent, isStandalone: true, selector: "crispr-sub-group", usesInheritance: true, ngImport: i0, template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n  <ng-container crisprField [value]=\"value() | initialControlValue : fieldConfig\" [config]=\"fieldConfig\"\n    [group]=\"subGroup()\" [testIdPrefix]=\"testId()\" />\n  }\n</crispr-field-container>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "testIdPrefix", "value"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-sub-group', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        ReactiveFormsModule,
+                        CrisprFieldDirective,
+                        FieldContainerComponent,
+                        InitialControlValuePipe
+                    ], template: "<crispr-field-container [config]=\"config()\" [group]=\"group()\">\n  @for (fieldConfig of config().fields; track fieldConfig) {\n  <ng-container crisprField [value]=\"value() | initialControlValue : fieldConfig\" [config]=\"fieldConfig\"\n    [group]=\"subGroup()\" [testIdPrefix]=\"testId()\" />\n  }\n</crispr-field-container>" }]
+        }] });
+
+/**
+ * @deprecated Import the standalone SubGroupComponent directly.
+ * This module will be removed in the next major version.
+ */
+class SubGroupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.6", ngImport: i0, type: SubGroupModule, imports: [SubGroupComponent], exports: [SubGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupModule, imports: [SubGroupComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: SubGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [SubGroupComponent],
+                    exports: [SubGroupComponent],
+                }]
+        }] });
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SubGroupComponent: SubGroupComponent,
+    SubGroupModule: SubGroupModule
+});
+
+/**
+ * @deprecated Import the standalone InitialControlValuePipe directly.
+ * This module will be removed in the next major version.
+ */
+class CrisprPipesModule {
+    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, imports: [InitialControlValuePipe], exports: [InitialControlValuePipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprPipesModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CrisprPipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [InitialControlValuePipe],
+                    exports: [InitialControlValuePipe],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AbstractAutocompleteComponent, AutocompleteChiplistFieldComponent, AutocompleteFieldComponent, ButtonComponent, CheckboxFieldComponent, ControlType, CrisprControlComponent, CrisprDisplayFieldComponent, CrisprDisplayFieldDirective, CrisprFieldComponent, CrisprFieldDirective, CrisprFormComponent, CrisprFormsModule, CrisprPipesModule, DEFAULT_EMPTY_OPTIONS_MESSAGE, DatepickerFieldComponent, DividerComponent, FieldContainerComponent, FileDropzoneDirective, FileUploadFieldComponent, FormGroupListComponent, HeadingComponent, ImageUploadFieldComponent, InfoComponent, InitialControlValuePipe, InputFieldComponent, MapFieldComponent, OptionComponent, RadioFieldComponent, SelectFieldComponent, SelectedFileComponent, SliderFieldComponent, SubGroupComponent, SubGroupModule, TextareaFieldComponent, UnitConversionFieldComponent, allowedFileExtValidator, allowedFileType, buildFormGroupFromConfig, callOptionsIfFunction, convertBytesToMb, createControlForType, filterOptionsByLabel, isControlConfig, maxFileSizeValidator, observablifyOptions, valueIn };
 //# sourceMappingURL=tft-crispr-forms.mjs.map