@tft/crispr-forms 14.0.1-rc.0 → 14.0.1

package/fesm2020/tft-crispr-forms.mjs

@@ -1,2036 +1,112 @@
-import { of, combineLatest, from, isObservable, BehaviorSubject, Subject } from 'rxjs';
-import * as i4 from '@angular/forms';
-import { FormGroup, FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
-import { map, startWith, debounceTime, distinctUntilChanged, switchMap, shareReplay, tap } from 'rxjs/operators';
 import * as i0 from '@angular/core';
-import { Directive, Component, ChangeDetectionStrategy, Input, NgModule, ViewChild, EventEmitter, Output, HostListener, Optional, Self, Pipe } from '@angular/core';
-import * as i6 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
+import { Directive, Input, Pipe, NgModule, EventEmitter, Component, Output, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i5 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i3$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i6$1 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i4$1 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i7 from '@angular/material/core';
-import { MatOptionModule } from '@angular/material/core';
-import * as i6$2 from '@angular/material/autocomplete';
-import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
-import { ENTER } from '@angular/cdk/keycodes';
-import * as i10 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i5$1 from '@angular/material/slider';
-import { MatSliderModule } from '@angular/material/slider';
-import * as i2 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i3$2 from '@angular/material/datepicker';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDateFnsModule } from '@angular/material-date-fns-adapter';
-import * as i7$1 from '@angular/cdk/portal';
-import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import * as i2$1 from '@angular/material/divider';
-import { MatDividerModule } from '@angular/material/divider';
-import * as i4$2 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
-import * as i2$3 from '@angular/platform-browser';
-import imageCompression from 'browser-image-compression';
-import * as i9 from '@tft/form-validation-handler';
-import { FormValidationHandlerModule } from '@tft/form-validation-handler';
-import * as i2$2 from '@angular/material/progress-bar';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-
-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["HEADING"] = "heading";
-    ControlType["INPUT"] = "input";
-    ControlType["IMAGE_UPLOAD"] = "imageUpload";
-    ControlType["GROUP_LIST"] = "groupList";
-    ControlType["RADIO"] = "radio";
-    ControlType["SELECT"] = "select";
-    ControlType["SLIDER"] = "slider";
-    ControlType["SUB_GROUP"] = "subGroup";
-    ControlType["TEXTAREA"] = "textarea";
-    ControlType["UNIT_CONVERSION"] = "unitConversion";
-})(ControlType || (ControlType = {}));
-
-;
-
-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('/');
-}
-
-/**
-* Watches a single control for a list of values, returns true when field value matches any value in list
-* unless an evaluate method is found on config, in which case that method is run on the returned boolean value
-* @param group the direct parent of the field we want to watch
-* @param config
-*/
-function checkControlForValues(group, config) {
-    // check that all the pieces we need are available
-    if (config && config.controlName && Array.isArray(config.values)) {
-        return getValueChanges(group, config.controlName).pipe(
-        // return a boolean, true if value is in the values being watch for, otherwise false
-        valueIn(config.values), map((isValueInValues) => {
-            // since we can only check if the value is in the list of watched values, the evaluate function gives us
-            // a chance to make other decisions based on if the boolean returned, e.g. return true if value not in watched values
-            if (config.evaluate && config.evaluate instanceof Function) {
-                return config.evaluate(isValueInValues);
-            }
-            else {
-                return isValueInValues;
-            }
-        }));
-    }
-    else {
-        //
-        return of(true);
-    }
-}
-/**
- * Watches a list of fields for individual lists of values returning true when any field contains one
- * of the values being watched for, or optionally running a function on the array of resolved booleans
- * from the listed fields and returning a boolean
- * @param group the form group that has the fields to watch as direct descendants
- * @param config the configuration to use when calling the function
- */
-function checkControlsForValues(group, config) {
-    // if no config is passed we just want to show the field, so we return an observable of true
-    if (!config || !config.watchConfigs) {
-        return of(true);
-    }
-    // we run checkControlForValues on every control in the list of WatchConfigs creating
-    // an array of Observable watching fields for values
-    const fieldTriggers = config.watchConfigs.map(watchConfig => {
-        // resolves a boolean, true when field value matches a watched value, otherwise false
-        return checkControlForValues(group, watchConfig);
-    });
-    return combineLatest(fieldTriggers).pipe(startWith([true]), map((booleans) => {
-        // if the user passed an evaluate function use it
-        if (config.evaluate && config.evaluate instanceof Function) {
-            return config.evaluate(booleans);
-        }
-        else { // otherwise we return true if any of the watched fields resolve to true
-            return booleans.some(bool => bool);
-        }
-    }));
-}
-/**
- * Watches values on an array of fields, computing their values as they change
- * @param group the group to get the fields from, for now it can only be the parent of the computed field
- * @param computeFieldsConfig the configuration that drives the computation, holds the names to watch and the
- * computation function that get called against the array of values
- */
-function computeValueFromFields(group, computeFieldsConfig) {
-    // TODO: better checking
-    const { controlNamesToWatch } = computeFieldsConfig;
-    //creates an observable listener for each control in the controlNamesToWatch array
-    return combineLatest(controlNamesToWatch.map(controlNameToWatch => getValueChanges(group, controlNameToWatch))).pipe(
-    // each time a watched field values changes a new array of the latest field values is pipe through to the
-    // compute callback. Which runs the users logic on the values to compute this fields value
-    map(valuesArray => computeFieldsConfig.computeCallback(valuesArray)));
-}
-/**
- * A simple wrapper for doing error checking around getting the valueChanges observable from a control on a form group
- * @param group the form group we want to pull the observable from
- * @param controlName the name of the control who's value we want to subscribe to
- */
-function getValueChanges(group, controlName) {
-    const control = group.get(controlName);
-    if (!control) {
-        throw new Error(`No control with controlName ${controlName}`);
-    }
-    return control.valueChanges;
-}
-/**
- *  TODO: move to utils library after library is built
- *  Allows developer to pass an array of operators into the pipe of an Observable.
- *  Useful for creating function with a variable amount of operators to be run
- * @param observable the observable to pass the operators to
- * @param operators array of operators to pipe
- */
-function pipeOperatorsIntoObservable(observable, operators) {
-    try {
-        return operators.reduce((obs, op) => {
-            return obs.pipe(op);
-        }, observable);
-    }
-    catch {
-        console.error('Unable to pipe operators into observable');
-        return of(null);
-    }
-}
-function callOptionsIfFunction(options, parentGroup, searchString) {
-    return options instanceof Function ? options(parentGroup, searchString) : options;
-}
-/**
- * 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;
-}
-/**
- * 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;
-}
-/**
- * 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;
-}
-/**
- * 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());
-    });
-}
-
-function crisprControlMixin(BaseClass) {
-    return class extends BaseClass {
-        set value(value) {
-            this.setControlValue(value);
-            this._value = value;
-        }
-        get value() {
-            return this._value;
-        }
-        ngOnInit() {
-            super.ngOnInit();
-            this.control = this.group.get(this.config.controlName);
-            this.setControlValue(this.value);
-            // setTimeouts are ugly but this seems to be the only way to get the computed field to compute initial values
-            setTimeout(() => {
-                this.control.updateValueAndValidity();
-            });
-        }
-        setControlValue(value) {
-            if (value && this.control && this.config.controlType !== ControlType.SUB_GROUP) {
-                this.control.setValue(value);
-            }
-        }
-    };
-}
-
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-class CrisprFieldComponent {
-    ngOnInit() {
-        this.applyDefaultConfig();
-    }
-    applyDefaultConfig() {
-        this.config = this.defaultConfig ? { ...this.defaultConfig, ...this.config } : this.config;
-    }
-}
-CrisprFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CrisprFieldComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CrisprFieldComponent, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFieldComponent, decorators: [{
-            type: Directive
-        }] });
-
-const AbstractAutocompleteFieldMixin = crisprControlMixin(CrisprFieldComponent);
-// eslint-disable-next-line @angular-eslint/directive-class-suffix
-class AbstractAutocompleteComponent extends AbstractAutocompleteFieldMixin {
-    constructor() {
-        super(...arguments);
-        // we need a separate control for the UI because of the way the material autocomplete chiplist works
-        this.autocompleteInputControl = new FormControl('');
-    }
-    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));
-    }
-}
-AbstractAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AbstractAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-AbstractAutocompleteComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: AbstractAutocompleteComponent, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AbstractAutocompleteComponent, decorators: [{
-            type: Directive
-        }] });
-
-class InfoComponent {
-}
-InfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: InfoComponent, selector: "crispr-info", inputs: { info: "info" }, ngImport: i0, template: "<mat-icon\n  *ngIf=\"info\"\n  [matTooltip]=\"info.content\"\n  [matTooltipPosition]=\"info.tooltipPosition || 'below'\"\n  matSuffix>\n  {{info.iconName || 'info'}}\n</mat-icon>\n", styles: [":host mat-icon{font-size:1.2em;width:1em;height:1em;opacity:.8;margin-right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InfoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-info', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-icon\n  *ngIf=\"info\"\n  [matTooltip]=\"info.content\"\n  [matTooltipPosition]=\"info.tooltipPosition || 'below'\"\n  matSuffix>\n  {{info.iconName || 'info'}}\n</mat-icon>\n", styles: [":host mat-icon{font-size:1.2em;width:1em;height:1em;opacity:.8;margin-right:0}\n"] }]
-        }], propDecorators: { info: [{
-                type: Input
-            }] } });
-class InfoModule {
-}
-InfoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: InfoModule, declarations: [InfoComponent], imports: [CommonModule,
-        MatIconModule,
-        MatTooltipModule], exports: [InfoComponent] });
-InfoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InfoModule, imports: [CommonModule,
-        MatIconModule,
-        MatTooltipModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InfoModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatIconModule,
-                        MatTooltipModule
-                    ],
-                    exports: [
-                        InfoComponent
-                    ],
-                    declarations: [
-                        InfoComponent
-                    ]
-                }]
-        }] });
-
-const defaultConfig$8 = {
-    typographyClass: 'mat-h3'
-};
-class HeadingComponent extends CrisprFieldComponent {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$8;
-    }
-}
-HeadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HeadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-HeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: HeadingComponent, selector: "crispr-heading", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: "  <label\n    *ngIf=\"!!config?.label\"\n    [ngClass]=\"config.typographyClass\">\n    {{ config.label }}\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n  </label>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HeadingComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-heading', changeDetection: ChangeDetectionStrategy.OnPush, template: "  <label\n    *ngIf=\"!!config?.label\"\n    [ngClass]=\"config.typographyClass\">\n    {{ config.label }}\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n  </label>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }] } });
-class HeadingModule {
-}
-HeadingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HeadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-HeadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: HeadingModule, declarations: [HeadingComponent], imports: [CommonModule,
-        MatFormFieldModule,
-        InfoModule], exports: [HeadingComponent] });
-HeadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HeadingModule, imports: [CommonModule,
-        MatFormFieldModule,
-        InfoModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: HeadingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatFormFieldModule,
-                        InfoModule
-                    ],
-                    exports: [
-                        HeadingComponent
-                    ],
-                    declarations: [
-                        HeadingComponent
-                    ]
-                }]
-        }] });
-
-class FieldContainerComponent {
-    constructor() {
-        // boolean whether field-container is inline
-        this.inlineField = false;
-        this.subs = [];
-    }
-    ngOnInit() {
-        this.disabled$ = this.connectDisabledCallback(this.group, this.config);
-        // we tried moving this into afterViewChecked and afterContentChecked lifecycle hooks without any luck
-        if (this.config.computeValue) {
-            this.subs.push(this.config.computeValue(this.group).pipe(distinctUntilChanged(), tap(computedValue => this.group.get(this.config.controlName).setValue(computedValue))).subscribe());
-        }
-        else if (this.config.computeFieldConfig) {
-            console.warn(`computeFieldConfig property is deprecated, please use computeValue. Example here: https://stackblitz.com/github/nayfin/tft-documentation?file=src%2Fapp%2Fcrispr-forms-demo%2Ffeatures%2Fcomputed-field%2Fcomputed-field.component.ts`);
-            this.subs.push(computeValueFromFields(this.group, this.config.computeFieldConfig).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, config.disabledCallbackConfig || null).pipe(
-            // This enables/disables when callback conditions are met
-            tap((shouldDisable) => shouldDisable ? control.disable() : control.enable()))
-            : of(false);
-    }
-}
-FieldContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FieldContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FieldContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: FieldContainerComponent, selector: "crispr-field-container", inputs: { config: "config", group: "group", inlineField: "inlineField" }, ngImport: i0, template: "<div\n  *ngIf=\"(disabled$ | async) ? !config.hideDisabled : true\"\n  [ngClass]=\"config.classes\"\n  [class.inline-field]=\"inlineField\"\n  class=\"field-container\">\n\n  <crispr-heading\n    *ngIf=\"config.heading\"\n    [config]=\"config.heading\">\n  </crispr-heading>\n\n  <ng-content>\n  </ng-content>\n\n</div>\n", styles: ["::ng-deep mat-form-field.mat-form-field{display:block;padding:.25em 0}.inline-field{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeadingComponent, selector: "crispr-heading", inputs: ["config"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FieldContainerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-field-container', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"(disabled$ | async) ? !config.hideDisabled : true\"\n  [ngClass]=\"config.classes\"\n  [class.inline-field]=\"inlineField\"\n  class=\"field-container\">\n\n  <crispr-heading\n    *ngIf=\"config.heading\"\n    [config]=\"config.heading\">\n  </crispr-heading>\n\n  <ng-content>\n  </ng-content>\n\n</div>\n", styles: ["::ng-deep mat-form-field.mat-form-field{display:block;padding:.25em 0}.inline-field{display:inline-block}\n"] }]
-        }], propDecorators: { config: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], inlineField: [{
-                type: Input
-            }] } });
-class FieldContainerModule {
-}
-FieldContainerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FieldContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FieldContainerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: FieldContainerModule, declarations: [FieldContainerComponent], imports: [CommonModule,
-        HeadingModule], exports: [FieldContainerComponent] });
-FieldContainerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FieldContainerModule, imports: [CommonModule,
-        HeadingModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FieldContainerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        HeadingModule,
-                    ],
-                    exports: [
-                        FieldContainerComponent
-                    ],
-                    declarations: [
-                        FieldContainerComponent
-                    ]
-                }]
-        }] });
-
-const InputFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class InputFieldComponent extends InputFieldMixin {
-    constructor() {
-        super();
-        this.defaultConfig = { inputType: 'text' };
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-InputFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: InputFieldComponent, selector: "crispr-input-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label>\n      {{config.label}}\n    </mat-label>\n    <input\n      [type]=\"config.inputType\"\n      matInput\n      [placeholder]=\"config.placeholder\"\n      [formControlName]=\"config.controlName\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [maxlength]=\"config.maxLength\"\n      [step]=\"config.step\"\n      [autofocus]=\"config.autofocus\"\n      [pattern]=\"config.pattern\"\n      [spellcheck]=\"config.spellcheck\"\n      [autocomplete]=\"config.autoComplete\"\n      [autocapitalize]=\"config.autoCapitalize\">\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      matSuffix\n      *ngIf=\"config.info\"\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n\n</crispr-field-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InputFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-input-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label>\n      {{config.label}}\n    </mat-label>\n    <input\n      [type]=\"config.inputType\"\n      matInput\n      [placeholder]=\"config.placeholder\"\n      [formControlName]=\"config.controlName\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [maxlength]=\"config.maxLength\"\n      [step]=\"config.step\"\n      [autofocus]=\"config.autofocus\"\n      [pattern]=\"config.pattern\"\n      [spellcheck]=\"config.spellcheck\"\n      [autocomplete]=\"config.autoComplete\"\n      [autocapitalize]=\"config.autoCapitalize\">\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      matSuffix\n      *ngIf=\"config.info\"\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n\n</crispr-field-container>\n" }]
-        }], ctorParameters: function () { return []; } });
-class InputFieldModule {
-}
-InputFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InputFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: InputFieldModule, declarations: [InputFieldComponent], imports: [CommonModule,
-        InfoModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatFormFieldModule,
-        MatInputModule], exports: [InputFieldComponent] });
-InputFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InputFieldModule, imports: [CommonModule,
-        InfoModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatFormFieldModule,
-        MatInputModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: InputFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        InfoModule,
-                        ReactiveFormsModule,
-                        FieldContainerModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                    ],
-                    exports: [
-                        InputFieldComponent
-                    ],
-                    declarations: [
-                        InputFieldComponent
-                    ]
-                }]
-        }] });
-
-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$2; }).then(({ ButtonComponent }) => ButtonComponent),
-    input: Promise.resolve().then(function () { return index$2; }).then(({ InputFieldComponent }) => InputFieldComponent),
-    select: Promise.resolve().then(function () { return index$2; }).then(({ SelectFieldComponent }) => SelectFieldComponent),
-    radio: Promise.resolve().then(function () { return index$2; }).then(({ RadioFieldComponent }) => RadioFieldComponent),
-    autocomplete: Promise.resolve().then(function () { return index$2; }).then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
-    autocompleteChiplist: Promise.resolve().then(function () { return index$2; }).then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
-    textarea: Promise.resolve().then(function () { return index$2; }).then(({ TextareaFieldComponent }) => TextareaFieldComponent),
-    checkbox: Promise.resolve().then(function () { return index$2; }).then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
-    slider: Promise.resolve().then(function () { return index$2; }).then(({ SliderFieldComponent }) => SliderFieldComponent),
-    datepicker: Promise.resolve().then(function () { return index$2; }).then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
-    fileUpload: Promise.resolve().then(function () { return index$2; }).then(({ FileUploadFieldComponent }) => FileUploadFieldComponent),
-    imageUpload: Promise.resolve().then(function () { return index$2; }).then(({ ImageUploadFieldComponent }) => ImageUploadFieldComponent),
-    heading: Promise.resolve().then(function () { return index$2; }).then(({ HeadingComponent }) => HeadingComponent),
-    divider: Promise.resolve().then(function () { return index$2; }).then(({ DividerComponent }) => DividerComponent),
-    unitConversion: Promise.resolve().then(function () { return index$2; }).then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent)
-};
-function isControlComponent(component) {
-    return component && isControlConfig(component.config) && 'value' in component; // || component.config.controlType === ControlType.BUTTON;
-}
-function isControlOrButtonComponent(component) {
-    return isControlComponent(component) || component.config.controlType === ControlType.BUTTON;
-}
-
-class CrisprFieldDirective {
-    constructor(container, renderer, cdr) {
-        this.container = container;
-        this.renderer = renderer;
-        this.cdr = cdr;
-    }
-    set value(value) {
-        this._value = value;
-        // This is needed to keep the group list from resetting control values to the initial input value
-        this.updateComponentValue(value);
-    }
-    ;
-    get value() {
-        return this._value;
-    }
-    async ngOnInit() {
-        /**
-         * create component and set values from config on its instance
-         */
-        const component = this.config.component || await FIELD_COMPONENTS[this.config.controlType];
-        const componentRef = this.container.createComponent(component);
-        this.component = componentRef.instance;
-        this.component.config = this.config;
-        if (isControlOrButtonComponent(this.component)) {
-            this.component.group = this.group;
-        }
-        this.updateComponentValue(this.value);
-        // adds any config classes to the dynamically generated component
-        // doing this here keeps us from having to extend a base component into each field component individually
-        if (!this.config.classes)
-            return;
-        this.config.classes.forEach((klass) => {
-            // check for passing multiple classes in one array element
-            if (klass.includes(' ')) {
-                throw Error(`Improperly formatted class. '${klass}' cannot contain spaces.`);
-            }
-            else {
-                this.renderer.addClass(componentRef.location.nativeElement, klass);
-            }
-        });
-    }
-    updateComponentValue(value) {
-        if (isControlComponent(this.component)) {
-            this.component.value = value;
-            // SubGroups won't populate without this detectChanges
-            this.cdr.detectChanges();
-        }
-    }
-}
-CrisprFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-CrisprFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CrisprFieldDirective, selector: "[crisprField]", inputs: { config: "config", group: "group", value: "value" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFieldDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[crisprField]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
-                type: Input
-            }], group: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
-class CrisprFieldModule {
-}
-CrisprFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CrisprFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: CrisprFieldModule, declarations: [CrisprFieldDirective], imports: [CommonModule], exports: [CrisprFieldDirective] });
-CrisprFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFieldModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                    ],
-                    exports: [
-                        CrisprFieldDirective
-                    ],
-                    declarations: [
-                        CrisprFieldDirective
-                    ]
-                }]
-        }] });
-
-class OptionComponent {
-}
-OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: OptionComponent, selector: "crispr-option", inputs: { option: "option" }, ngImport: i0, template: "<div>\n  <img\n    *ngIf=\"option.imageUrl\"\n    [src]=\"option.imageUrl\"\n    alt=\"image of {{option.label}}\"\n    style=\"vertical-align:middle;\"\n    aria-hidden\n    height=\"25\"/>\n  {{option.label}}\n</div>\n\n<crispr-info *ngIf=\"option.info as info\" [info]=\"info\">\n\n</crispr-info>\n", styles: [":host{display:flex;justify-content:space-between}:host img{margin-right:4px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: OptionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-option', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <img\n    *ngIf=\"option.imageUrl\"\n    [src]=\"option.imageUrl\"\n    alt=\"image of {{option.label}}\"\n    style=\"vertical-align:middle;\"\n    aria-hidden\n    height=\"25\"/>\n  {{option.label}}\n</div>\n\n<crispr-info *ngIf=\"option.info as info\" [info]=\"info\">\n\n</crispr-info>\n", styles: [":host{display:flex;justify-content:space-between}:host img{margin-right:4px}\n"] }]
-        }], propDecorators: { option: [{
-                type: Input
-            }] } });
-class OptionModule {
-}
-OptionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: OptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-OptionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: OptionModule, declarations: [OptionComponent], imports: [CommonModule,
-        InfoModule], exports: [OptionComponent] });
-OptionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: OptionModule, imports: [CommonModule,
-        InfoModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: OptionModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        InfoModule,
-                    ],
-                    exports: [
-                        OptionComponent
-                    ],
-                    declarations: [
-                        OptionComponent
-                    ]
-                }]
-        }] });
-
-const SelectFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class SelectFieldComponent extends SelectFieldMixin {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = {
-            enableToggleAll: false,
-            color: 'primary'
-        };
-        this.allSelected = false;
-    }
-    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);
-    }
-    ngAfterViewInit() {
-        if (this.config.multiple
-            && this.config.enableToggleAll
-            && this.selectField.options?.length === this.value?.length) {
-            this.allSelected = true;
-        }
-    }
-    toggleAll(isSelected) {
-        if (isSelected) {
-            this.selectField.options.forEach(option => option.deselect());
-        }
-        else {
-            this.selectField.options.forEach(option => option.select());
-        }
-        this.allSelected = !this.allSelected;
-    }
-}
-SelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: SelectFieldComponent, selector: "crispr-select-field", viewQueries: [{ propertyName: "selectField", first: true, predicate: ["selectField"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <mat-select\n      #selectField\n      [formControlName]=\"config.controlName\"\n      [placeholder]=\"config.placeholder\"\n      [multiple]=\"config.multiple\">\n\n      <mat-checkbox\n        [color]=\"config.color\"\n        [checked]=\"allSelected\"\n        *ngIf=\"config?.multiple && config.enableToggleAll\"\n        (click)=\"toggleAll(allSelected)\">\n        Select All\n      </mat-checkbox>\n      <mat-option\n        *ngFor=\"let option of options$ | async\"\n        [value]=\"option.value\">\n        <crispr-option [option]=\"option\">\n        </crispr-option>\n      </mat-option>\n\n    </mat-select>\n\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-select-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <mat-select\n      #selectField\n      [formControlName]=\"config.controlName\"\n      [placeholder]=\"config.placeholder\"\n      [multiple]=\"config.multiple\">\n\n      <mat-checkbox\n        [color]=\"config.color\"\n        [checked]=\"allSelected\"\n        *ngIf=\"config?.multiple && config.enableToggleAll\"\n        (click)=\"toggleAll(allSelected)\">\n        Select All\n      </mat-checkbox>\n      <mat-option\n        *ngFor=\"let option of options$ | async\"\n        [value]=\"option.value\">\n        <crispr-option [option]=\"option\">\n        </crispr-option>\n      </mat-option>\n\n    </mat-select>\n\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}\n"] }]
-        }], propDecorators: { selectField: [{
-                type: ViewChild,
-                args: ['selectField']
-            }] } });
-class SelectFieldModule {
-}
-SelectFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SelectFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: SelectFieldModule, declarations: [SelectFieldComponent], imports: [CommonModule,
-        InfoModule,
-        OptionModule,
-        MatCheckboxModule,
-        MatSelectModule,
-        ReactiveFormsModule,
-        CrisprFieldModule,
-        FieldContainerModule,
-        MatFormFieldModule], exports: [SelectFieldComponent] });
-SelectFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectFieldModule, imports: [CommonModule,
-        InfoModule,
-        OptionModule,
-        MatCheckboxModule,
-        MatSelectModule,
-        ReactiveFormsModule,
-        CrisprFieldModule,
-        FieldContainerModule,
-        MatFormFieldModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        InfoModule,
-                        OptionModule,
-                        MatCheckboxModule,
-                        MatSelectModule,
-                        ReactiveFormsModule,
-                        CrisprFieldModule,
-                        FieldContainerModule,
-                        MatFormFieldModule,
-                    ],
-                    exports: [
-                        SelectFieldComponent
-                    ],
-                    declarations: [
-                        SelectFieldComponent
-                    ]
-                }]
-        }] });
-
-const defaultConfig$7 = {
-    autoActiveFirstOption: true,
-    typeDebounceTime: 500,
-    emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE
-};
-class AutocompleteFieldComponent extends AbstractAutocompleteComponent {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$7;
-    }
-    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();
-    }
-}
-AutocompleteFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AutocompleteFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: AutocompleteFieldComponent, selector: "crispr-autocomplete-field", viewQueries: [{ propertyName: "autoInput", first: true, predicate: ["autoInput"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "autoInputRef", first: true, predicate: ["autoInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </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    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info \">\n    </crispr-info>\n\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"displayLabel(options$ | async)\">\n\n      <ng-container *ngIf=\"options$ | async as options; else emptyOption\">\n        <ng-container *ngIf=\"options.length > 0; else emptyOption\">\n          <mat-option\n            *ngFor=\"let option of options\"\n            [value]=\"option.value\">\n            <crispr-option [option]=\"option\"></crispr-option>\n          </mat-option>\n        </ng-container>\n\n      </ng-container>\n      <ng-template #emptyOption>\n        <mat-option disabled=\"true\">\n          {{config.emptyOptionsMessage}}\n        </mat-option>\n      </ng-template>\n\n    </mat-autocomplete>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n</crispr-field-container>\n", styles: [".hidden-error-directive-anchor{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-autocomplete-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </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    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info \">\n    </crispr-info>\n\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"displayLabel(options$ | async)\">\n\n      <ng-container *ngIf=\"options$ | async as options; else emptyOption\">\n        <ng-container *ngIf=\"options.length > 0; else emptyOption\">\n          <mat-option\n            *ngFor=\"let option of options\"\n            [value]=\"option.value\">\n            <crispr-option [option]=\"option\"></crispr-option>\n          </mat-option>\n        </ng-container>\n\n      </ng-container>\n      <ng-template #emptyOption>\n        <mat-option disabled=\"true\">\n          {{config.emptyOptionsMessage}}\n        </mat-option>\n      </ng-template>\n\n    </mat-autocomplete>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n</crispr-field-container>\n", styles: [".hidden-error-directive-anchor{display:none}\n"] }]
-        }], propDecorators: { autoInput: [{
-                type: ViewChild,
-                args: ['autoInput', { read: MatAutocompleteTrigger }]
-            }], autoInputRef: [{
-                type: ViewChild,
-                args: ['autoInput']
-            }] } });
-class AutocompleteFieldModule {
-}
-AutocompleteFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AutocompleteFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteFieldModule, declarations: [AutocompleteFieldComponent], imports: [CommonModule,
-        InfoModule,
-        OptionModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatAutocompleteModule,
-        MatInputModule,
-        MatOptionModule], exports: [AutocompleteFieldComponent] });
-AutocompleteFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteFieldModule, imports: [CommonModule,
-        InfoModule,
-        OptionModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatAutocompleteModule,
-        MatInputModule,
-        MatOptionModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        InfoModule,
-                        OptionModule,
-                        ReactiveFormsModule,
-                        FieldContainerModule,
-                        MatAutocompleteModule,
-                        MatInputModule,
-                        MatOptionModule,
-                    ],
-                    exports: [
-                        AutocompleteFieldComponent
-                    ],
-                    declarations: [
-                        AutocompleteFieldComponent
-                    ]
-                }]
-        }] });
-
-const defaultConfig$6 = {
-    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,
-};
-class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$6;
-        this.chips$ = new BehaviorSubject([]);
-        this.controlValue$ = this.chips$.pipe(tap(chips => {
-            this.control.setValue(chips.map(chip => chip.value));
-        }));
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.remainingOptions$ = combineLatest([
-            this.chips$,
-            this.options$
-        ]).pipe(map(([chips, options]) => {
-            return this.config.allowDuplicates
-                ? options
-                : options?.filter(option => {
-                    return !chips.some(chip => this.config.duplicateCompareFunction(chip, option));
-                });
-        }));
-    }
-    setControlValue(value) {
-        if (value) {
-            this.chips$.next(value);
-        }
-    }
-    // handles mat selecting
-    handleSelect(event) {
-        const selectedOption = event.option.value;
-        this.chips$.next([...this.chips$.value, selectedOption]);
-        this.chipInputRef.nativeElement.value = '';
-        this.autocompleteInputControl.setValue('');
-        // setTimeout needed because the panel thinks it's still open at this point
-        setTimeout(() => this.chipInput.openPanel());
-    }
-    /**
-     * 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) {
-        if (this.chipInput.activeOption && (this.config.tabToSelect || this.config.addChipOnBlur)) {
-            const chip = this.chipInput.activeOption.value;
-            this.chips$.next([...this.chips$.value, chip]);
-        }
-    }
-    /**
-     * Handles selection via key tokens passed through separatorKeyCodes propert
-     * NOTE: If TAB is used focus does not move on to next component
-     * @param event
-     */
-    handleTokenEnd(event) {
-        if (this.chipInput.activeOption) {
-            this.chipInput.activeOption.select();
-        }
-        event.chipInput?.clear();
-    }
-    mapToLabel(option) {
-        return option ? option.label : '';
-    }
-    removeChip(removedChip) {
-        const remainingChips = this.chips$.value.filter(chip => chip !== removedChip);
-        this.chips$.next(remainingChips);
-    }
-}
-AutocompleteChiplistFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteChiplistFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AutocompleteChiplistFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: AutocompleteChiplistFieldComponent, selector: "crispr-autocomplete-chiplist-field", viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["autoInput"], descendants: true, read: MatAutocompleteTrigger }, { propertyName: "chipInputRef", first: true, predicate: ["autoInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n\n    <mat-chip-list\n      #chipList>\n      <mat-chip\n        class=\"refinement-chip\"\n        *ngFor=\"let chip of controlValue$ | async\"\n        [selectable]=\"config.chipsSelectable\"\n        [removable]=\"config.areChipsRemovable\"\n        (removed)=\"removeChip(chip)\">\n        <span *ngIf=\"chip.imageUrl as imageUrl\" class=\"image-container\">\n          <img [src]=\"imageUrl\" alt=\"image of {{chip.label}}\">\n        </span>\n        {{chip.label}}\n        <mat-icon\n          matChipRemove\n          *ngIf=\"config.areChipsRemovable\">\n          cancel\n        </mat-icon>\n      </mat-chip>\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        [matChipInputFor]=\"chipList\"\n        [matAutocomplete]=\"auto\"\n        (keydown.tab)=\"handleTab($event)\"\n        [matChipInputSeparatorKeyCodes]=\"config.separatorKeyCodes\"\n        (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n        role=\"searchbox\"\n        type=\"text\"\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        spellcheck=\"false\"\n        #autoInput/>\n      <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n      <crispr-info\n        *ngIf=\"config.info\"\n        matSuffix\n        [info]=\"config.info \">\n      </crispr-info>\n\n    </mat-chip-list>\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"this.config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"mapToLabel\">\n      <ng-container *ngIf=\"remainingOptions$ | async as remainingOptions; else emptyOption\">\n        <ng-container *ngIf=\"remainingOptions.length > 0; else emptyOption\">\n           <mat-option\n            *ngFor=\"let option of remainingOptions$ | async\"\n            [value]=\"option\">\n            <crispr-option [option]=\"option\"></crispr-option>\n          </mat-option>\n        </ng-container>\n\n      </ng-container>\n      <ng-template #emptyOption>\n        <mat-option disabled=\"true\">\n          {{config.emptyOptionsMessage}}\n        </mat-option>\n      </ng-template>\n    </mat-autocomplete>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "component", type: i6$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "directive", type: i10.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i10.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteChiplistFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-autocomplete-chiplist-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n\n    <mat-chip-list\n      #chipList>\n      <mat-chip\n        class=\"refinement-chip\"\n        *ngFor=\"let chip of controlValue$ | async\"\n        [selectable]=\"config.chipsSelectable\"\n        [removable]=\"config.areChipsRemovable\"\n        (removed)=\"removeChip(chip)\">\n        <span *ngIf=\"chip.imageUrl as imageUrl\" class=\"image-container\">\n          <img [src]=\"imageUrl\" alt=\"image of {{chip.label}}\">\n        </span>\n        {{chip.label}}\n        <mat-icon\n          matChipRemove\n          *ngIf=\"config.areChipsRemovable\">\n          cancel\n        </mat-icon>\n      </mat-chip>\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        [matChipInputFor]=\"chipList\"\n        [matAutocomplete]=\"auto\"\n        (keydown.tab)=\"handleTab($event)\"\n        [matChipInputSeparatorKeyCodes]=\"config.separatorKeyCodes\"\n        (matChipInputTokenEnd)=\"handleTokenEnd($event)\"\n        role=\"searchbox\"\n        type=\"text\"\n        autocapitalize=\"off\"\n        autocorrect=\"off\"\n        spellcheck=\"false\"\n        #autoInput/>\n      <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n      <crispr-info\n        *ngIf=\"config.info\"\n        matSuffix\n        [info]=\"config.info \">\n      </crispr-info>\n\n    </mat-chip-list>\n    <mat-autocomplete\n      #auto=\"matAutocomplete\"\n      [autoActiveFirstOption]=\"this.config.autoActiveFirstOption\"\n      (optionSelected)=\"handleSelect($event)\"\n      [displayWith]=\"mapToLabel\">\n      <ng-container *ngIf=\"remainingOptions$ | async as remainingOptions; else emptyOption\">\n        <ng-container *ngIf=\"remainingOptions.length > 0; else emptyOption\">\n           <mat-option\n            *ngFor=\"let option of remainingOptions$ | async\"\n            [value]=\"option\">\n            <crispr-option [option]=\"option\"></crispr-option>\n          </mat-option>\n        </ng-container>\n\n      </ng-container>\n      <ng-template #emptyOption>\n        <mat-option disabled=\"true\">\n          {{config.emptyOptionsMessage}}\n        </mat-option>\n      </ng-template>\n    </mat-autocomplete>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\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}\n"] }]
-        }], propDecorators: { chipInput: [{
-                type: ViewChild,
-                args: ['autoInput', { read: MatAutocompleteTrigger }]
-            }], chipInputRef: [{
-                type: ViewChild,
-                args: ['autoInput']
-            }] } });
-class AutocompleteChiplistFieldModule {
-}
-AutocompleteChiplistFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteChiplistFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AutocompleteChiplistFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteChiplistFieldModule, declarations: [AutocompleteChiplistFieldComponent], imports: [CommonModule,
-        InfoModule,
-        OptionModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatAutocompleteModule,
-        MatInputModule,
-        MatOptionModule,
-        MatChipsModule,
-        MatIconModule], exports: [AutocompleteChiplistFieldComponent] });
-AutocompleteChiplistFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteChiplistFieldModule, imports: [CommonModule,
-        InfoModule,
-        OptionModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatAutocompleteModule,
-        MatInputModule,
-        MatOptionModule,
-        MatChipsModule,
-        MatIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: AutocompleteChiplistFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        InfoModule,
-                        OptionModule,
-                        ReactiveFormsModule,
-                        FieldContainerModule,
-                        MatAutocompleteModule,
-                        MatInputModule,
-                        MatOptionModule,
-                        MatChipsModule,
-                        MatIconModule
-                    ],
-                    exports: [
-                        AutocompleteChiplistFieldComponent
-                    ],
-                    declarations: [
-                        AutocompleteChiplistFieldComponent
-                    ]
-                }]
-        }] });
-
-const defaultConfig$5 = {
-    labelPosition: 'after',
-    inline: false
-};
-const CheckboxFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class CheckboxFieldComponent extends CheckboxFieldMixin {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$5;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-CheckboxFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CheckboxFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CheckboxFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: CheckboxFieldComponent, 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      [color]=\"config.color\"\n      [labelPosition]=\"config.labelPosition\"\n      [formControlName]=\"config.controlName\">\n      {{config.label}}\n      <crispr-info\n        matSuffix *ngIf=\"config.info\"\n        [info]=\"config.info\">\n      </crispr-info>\n    </mat-checkbox>\n  </div>\n</crispr-field-container>\n", styles: ["mat-checkbox{height:42px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CheckboxFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-checkbox-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [inlineField]=\"config.inline\">\n  <div\n    [formGroup]=\"group\">\n    <mat-checkbox\n      [color]=\"config.color\"\n      [labelPosition]=\"config.labelPosition\"\n      [formControlName]=\"config.controlName\">\n      {{config.label}}\n      <crispr-info\n        matSuffix *ngIf=\"config.info\"\n        [info]=\"config.info\">\n      </crispr-info>\n    </mat-checkbox>\n  </div>\n</crispr-field-container>\n", styles: ["mat-checkbox{height:42px}\n"] }]
-        }] });
-class CheckboxFieldModule {
-}
-CheckboxFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CheckboxFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CheckboxFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: CheckboxFieldModule, declarations: [CheckboxFieldComponent], imports: [CommonModule,
-        InfoModule,
-        MatCheckboxModule,
-        ReactiveFormsModule,
-        CrisprFieldModule,
-        FieldContainerModule], exports: [CheckboxFieldComponent] });
-CheckboxFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CheckboxFieldModule, imports: [CommonModule,
-        InfoModule,
-        MatCheckboxModule,
-        ReactiveFormsModule,
-        CrisprFieldModule,
-        FieldContainerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CheckboxFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        InfoModule,
-                        MatCheckboxModule,
-                        ReactiveFormsModule,
-                        CrisprFieldModule,
-                        FieldContainerModule
-                    ],
-                    exports: [
-                        CheckboxFieldComponent
-                    ],
-                    declarations: [
-                        CheckboxFieldComponent
-                    ]
-                }]
-        }] });
-
-const defaultConfig$4 = { rows: 5 };
-const TextareaFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class TextareaFieldComponent extends TextareaFieldMixin {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$4;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-TextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: TextareaFieldComponent, selector: "crispr-textarea-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <textarea\n      [rows]=\"config.rows\"\n      matInput\n      [placeholder]=\"config.placeholder\"\n      [formControlName]=\"config.controlName\">\n    </textarea>\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && control.valid\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TextareaFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-textarea-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <textarea\n      [rows]=\"config.rows\"\n      matInput\n      [placeholder]=\"config.placeholder\"\n      [formControlName]=\"config.controlName\">\n    </textarea>\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      *ngIf=\"config.info\"\n      matSuffix\n      [info]=\"config.info\">\n    </crispr-info>\n\n    <mat-hint *ngIf=\"config.hint && control.valid\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n" }]
-        }] });
-class TextareaFieldModule {
-}
-TextareaFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TextareaFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TextareaFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: TextareaFieldModule, declarations: [TextareaFieldComponent], imports: [CommonModule,
-        InfoModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatFormFieldModule,
-        MatInputModule], exports: [TextareaFieldComponent] });
-TextareaFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TextareaFieldModule, imports: [CommonModule,
-        InfoModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatFormFieldModule,
-        MatInputModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: TextareaFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        InfoModule,
-                        ReactiveFormsModule,
-                        FieldContainerModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                    ],
-                    exports: [
-                        TextareaFieldComponent
-                    ],
-                    declarations: [
-                        TextareaFieldComponent
-                    ]
-                }]
-        }] });
-
-const defaultConfig$3 = { displayLimits: true };
-const SliderFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class SliderFieldComponent extends SliderFieldMixin {
-    constructor() {
-        super();
-        this.defaultConfig = defaultConfig$3;
-    }
-    get flexDirection() {
-        return this.config.vertical ? 'column' : 'row';
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-SliderFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SliderFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: SliderFieldComponent, selector: "crispr-slider-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <div\n    [formGroup]=\"group\">\n    <label *ngIf=\"config.label\">\n      {{config.label}}\n      <crispr-info\n        *ngIf=\"config.info\"\n        [info]=\"config.info\">\n      </crispr-info>\n    </label>\n    <div class=\"slider-container\"\n      [ngStyle]=\"{'flex-direction': flexDirection}\">\n      <span *ngIf=\"config.displayLimits\">\n        {{config.min}}\n      </span>\n      <mat-slider\n        class=\"example-margin\"\n        [formControlName]=\"config.controlName\"\n        [invert]=\"config.invert\"\n        [max]=\"config.max\"\n        [min]=\"config.min\"\n        [step]=\"config.step\"\n        [thumbLabel]=\"config.thumbLabel\"\n        [tickInterval]=\"config.tickInterval\"\n        [vertical]=\"config.vertical\">\n      </mat-slider>\n      <span *ngIf=\"config.displayLimits\">\n        {{config.max}}\n      </span>\n    </div>\n\n  </div>\n</crispr-field-container>\n\n", styles: [".slider-container{display:flex;align-items:center}.slider-container .mat-slider-horizontal{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SliderFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-slider-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <div\n    [formGroup]=\"group\">\n    <label *ngIf=\"config.label\">\n      {{config.label}}\n      <crispr-info\n        *ngIf=\"config.info\"\n        [info]=\"config.info\">\n      </crispr-info>\n    </label>\n    <div class=\"slider-container\"\n      [ngStyle]=\"{'flex-direction': flexDirection}\">\n      <span *ngIf=\"config.displayLimits\">\n        {{config.min}}\n      </span>\n      <mat-slider\n        class=\"example-margin\"\n        [formControlName]=\"config.controlName\"\n        [invert]=\"config.invert\"\n        [max]=\"config.max\"\n        [min]=\"config.min\"\n        [step]=\"config.step\"\n        [thumbLabel]=\"config.thumbLabel\"\n        [tickInterval]=\"config.tickInterval\"\n        [vertical]=\"config.vertical\">\n      </mat-slider>\n      <span *ngIf=\"config.displayLimits\">\n        {{config.max}}\n      </span>\n    </div>\n\n  </div>\n</crispr-field-container>\n\n", styles: [".slider-container{display:flex;align-items:center}.slider-container .mat-slider-horizontal{width:100%}\n"] }]
-        }], ctorParameters: function () { return []; } });
-class SliderFieldModule {
-}
-SliderFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SliderFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SliderFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: SliderFieldModule, declarations: [SliderFieldComponent], imports: [CommonModule,
-        InfoModule,
-        OptionModule,
-        FieldContainerModule,
-        ReactiveFormsModule,
-        MatSliderModule], exports: [SliderFieldComponent] });
-SliderFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SliderFieldModule, imports: [CommonModule,
-        InfoModule,
-        OptionModule,
-        FieldContainerModule,
-        ReactiveFormsModule,
-        MatSliderModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SliderFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        InfoModule,
-                        OptionModule,
-                        FieldContainerModule,
-                        ReactiveFormsModule,
-                        MatSliderModule
-                    ],
-                    exports: [
-                        SliderFieldComponent
-                    ],
-                    declarations: [
-                        SliderFieldComponent
-                    ]
-                }]
-        }] });
-
-class ButtonComponent extends CrisprFieldComponent {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = { buttonType: 'raised', type: 'submit' };
-    }
-    get matButtonClass() {
-        return this.config.buttonType ? `mat-${this.config.buttonType}-button` : '';
-    }
-    ngOnInit() {
-        super.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);
-        }
-    }
-}
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: ButtonComponent, selector: "crispr-button", usesInheritance: true, ngImport: i0, template: "<button\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  <mat-icon *ngIf=\"config.icon\">\n    {{ config.icon}}\n  </mat-icon>\n</button>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\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  <mat-icon *ngIf=\"config.icon\">\n    {{ config.icon}}\n  </mat-icon>\n</button>\n\n" }]
-        }] });
-class ButtonModule {
-}
-ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule,
-        MatButtonModule,
-        MatIconModule,
-        MatTooltipModule,
-        ReactiveFormsModule], exports: [ButtonComponent] });
-ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ButtonModule, imports: [CommonModule,
-        MatButtonModule,
-        MatIconModule,
-        MatTooltipModule,
-        ReactiveFormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        MatTooltipModule,
-                        ReactiveFormsModule,
-                    ],
-                    exports: [
-                        ButtonComponent
-                    ],
-                    declarations: [
-                        ButtonComponent
-                    ]
-                }]
-        }] });
-
-const defaultConfig$2 = {
-    startView: 'month',
-};
-const DatepickerFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class DatepickerFieldComponent extends DatepickerFieldMixin {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$2;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.startAt$ = this.config.startAt instanceof Date
-            ? of(this.config.startAt)
-            : this.config.startAt instanceof Function
-                ? this.config.startAt(this.group)
-                : of(null);
-        this.dateClass = this.config?.cellClassFunction || null;
-        this.dateClass$ = this.config.dateClass ? this.config?.dateClass(this.group) : of(() => '');
-    }
-    ngAfterContentInit() {
-        if (this.config.datepickerActions) {
-            this.calendarFooterPortal = new ComponentPortal(this.config.datepickerActions);
-        }
-    }
-}
-DatepickerFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DatepickerFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DatepickerFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: DatepickerFieldComponent, selector: "crispr-datepicker-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </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\"></mat-datepicker-toggle>\n    <mat-datepicker\n      [touchUi]=\"config.touchUi\"\n      [startView]=\"config.startView\"\n      [startAt]=\"startAt$ | async\"\n      [dateClass]=\"dateClass || (dateClass$ | async)\"\n      #picker>\n      <mat-datepicker-actions *ngIf=\"calendarFooterPortal\">\n        <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n</crispr-field-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$2.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DatepickerFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-datepicker-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </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\"></mat-datepicker-toggle>\n    <mat-datepicker\n      [touchUi]=\"config.touchUi\"\n      [startView]=\"config.startView\"\n      [startAt]=\"startAt$ | async\"\n      [dateClass]=\"dateClass || (dateClass$ | async)\"\n      #picker>\n      <mat-datepicker-actions *ngIf=\"calendarFooterPortal\">\n        <ng-template [cdkPortalOutlet]=\"calendarFooterPortal\"></ng-template>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n</crispr-field-container>\n\n" }]
-        }] });
-class DatepickerFieldModule {
-}
-DatepickerFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DatepickerFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DatepickerFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: DatepickerFieldModule, declarations: [DatepickerFieldComponent], imports: [CommonModule,
-        FieldContainerModule,
-        MatDatepickerModule,
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        MatInputModule,
-        MatDateFnsModule,
-        PortalModule], exports: [DatepickerFieldComponent] });
-DatepickerFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DatepickerFieldModule, imports: [CommonModule,
-        FieldContainerModule,
-        MatDatepickerModule,
-        MatFormFieldModule,
-        ReactiveFormsModule,
-        MatInputModule,
-        MatDateFnsModule,
-        PortalModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DatepickerFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FieldContainerModule,
-                        MatDatepickerModule,
-                        MatFormFieldModule,
-                        ReactiveFormsModule,
-                        MatInputModule,
-                        MatDateFnsModule,
-                        PortalModule
-                    ],
-                    exports: [
-                        DatepickerFieldComponent
-                    ],
-                    declarations: [
-                        DatepickerFieldComponent
-                    ]
-                }]
-        }] });
-
-class DividerComponent extends CrisprFieldComponent {
-    constructor() {
-        super(...arguments);
-        // TODO: pull in type after configs are better organized
-        this.defaultConfig = {};
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: DividerComponent, selector: "crispr-divider", usesInheritance: true, ngImport: i0, template: "<mat-divider [ngClass]=\"config.classes\"></mat-divider>", styles: [":host{display:block;padding:1em 0}::ng-deep .mat-divider.mat-divider-horizontal{position:relative}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DividerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-divider', template: "<mat-divider [ngClass]=\"config.classes\"></mat-divider>", styles: [":host{display:block;padding:1em 0}::ng-deep .mat-divider.mat-divider-horizontal{position:relative}\n"] }]
-        }] });
-class DividerModule {
-}
-DividerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DividerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DividerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: DividerModule, declarations: [DividerComponent], imports: [CommonModule,
-        MatDividerModule], exports: [DividerComponent] });
-DividerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DividerModule, imports: [CommonModule,
-        MatDividerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: DividerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatDividerModule
-                    ],
-                    exports: [
-                        DividerComponent
-                    ],
-                    declarations: [
-                        DividerComponent
-                    ]
-                }]
-        }] });
-
-const RadioFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class RadioFieldComponent extends RadioFieldMixin {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = {};
-    }
-    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);
-    }
-}
-RadioFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: RadioFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-RadioFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: RadioFieldComponent, selector: "crispr-radio-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-radio-group\n    [formControl]=\"control\"\n    [color]=\"config.color\">\n    <mat-radio-button class=\"example-radio-button\" *ngFor=\"let option of options$ | async\" [value]=\"option.value\">\n      {{option.label}}\n    </mat-radio-button>\n  </mat-radio-group>\n</crispr-field-container>\n", styles: ["mat-radio-button{padding:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "directive", type: i4$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: RadioFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-radio-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-radio-group\n    [formControl]=\"control\"\n    [color]=\"config.color\">\n    <mat-radio-button class=\"example-radio-button\" *ngFor=\"let option of options$ | async\" [value]=\"option.value\">\n      {{option.label}}\n    </mat-radio-button>\n  </mat-radio-group>\n</crispr-field-container>\n", styles: ["mat-radio-button{padding:12px}\n"] }]
-        }] });
-class RadioFieldModule {
-}
-RadioFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: RadioFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RadioFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: RadioFieldModule, declarations: [RadioFieldComponent], imports: [CommonModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatRadioModule], exports: [RadioFieldComponent] });
-RadioFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: RadioFieldModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatRadioModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: RadioFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FieldContainerModule,
-                        MatRadioModule,
-                    ],
-                    exports: [
-                        RadioFieldComponent
-                    ],
-                    declarations: [
-                        RadioFieldComponent
-                    ]
-                }]
-        }] });
-
-const defaultConfig$1 = {};
-const UnitConversionFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class UnitConversionFieldComponent extends UnitConversionFieldMixin {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$1;
-        this.displayValueControl = new FormControl();
-        this.unitSelectControl = new FormControl();
-    }
-    ngOnInit() {
-        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 (this.config.showUnitSelect) {
-            this.unitOptions$ = observablifyOptions(this.config.selectableUnits, this.group);
-            controlValuePipeline.push(this.unitSelectControl.valueChanges.pipe(startWith(this.config?.initialDisplayUnit || null)));
-            this.unitSelectControl.setValue(this.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 initialUnitValue = this.config.showUnitSelect ? this.config?.initialDisplayUnit : null;
-        this.setInitialDisplayValue(value, initialUnitValue);
-    }
-}
-UnitConversionFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UnitConversionFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-UnitConversionFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: UnitConversionFieldComponent, selector: "crispr-unit-conversion-field", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [style.width.%]=\"config.showUnitSelect ? 60 : 100\"\n    class=\"number-field\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <input\n      type=\"number\"\n      matInput\n      [formControl]=\"displayValueControl\"\n      [placeholder]=\"config.placeholder\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [step]=\"config.step\"\n      [autofocus]=\"config.autofocus\">\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      matSuffix\n      *ngIf=\"config.info\"\n      [info]=\"config.info\">\n    </crispr-info>\n  </mat-form-field>\n\n  <mat-form-field\n    *ngIf=\"config.showUnitSelect\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\"\n    class=\"unit-field\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <mat-select\n      #selectField\n      [formControl]=\"unitSelectControl\">\n\n      <mat-option\n        *ngFor=\"let option of unitOptions$ | async\"\n        [value]=\"option.value\">\n        <crispr-option [option]=\"option\">\n        </crispr-option>\n      </mat-option>\n\n    </mat-select>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { kind: "component", type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i4.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UnitConversionFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-unit-conversion-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field\n    [style.width.%]=\"config.showUnitSelect ? 60 : 100\"\n    class=\"number-field\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <input\n      type=\"number\"\n      matInput\n      [formControl]=\"displayValueControl\"\n      [placeholder]=\"config.placeholder\"\n      [min]=\"config.min\"\n      [max]=\"config.max\"\n      [step]=\"config.step\"\n      [autofocus]=\"config.autofocus\">\n    <span *ngIf=\"config.fieldSuffix\" matSuffix>{{config.fieldSuffix}}</span>\n    <crispr-info\n      matSuffix\n      *ngIf=\"config.info\"\n      [info]=\"config.info\">\n    </crispr-info>\n  </mat-form-field>\n\n  <mat-form-field\n    *ngIf=\"config.showUnitSelect\"\n    [color]=\"config.color\"\n    [appearance]=\"config.appearance\"\n    [formGroup]=\"group\"\n    class=\"unit-field\">\n    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\n    <mat-select\n      #selectField\n      [formControl]=\"unitSelectControl\">\n\n      <mat-option\n        *ngFor=\"let option of unitOptions$ | async\"\n        [value]=\"option.value\">\n        <crispr-option [option]=\"option\">\n        </crispr-option>\n      </mat-option>\n\n    </mat-select>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"] }]
-        }] });
-class UnitConversionFieldModule {
-}
-UnitConversionFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UnitConversionFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UnitConversionFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: UnitConversionFieldModule, declarations: [UnitConversionFieldComponent], imports: [CommonModule,
-        InfoModule,
-        OptionModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatInputModule,
-        MatSelectModule,
-        MatOptionModule], exports: [UnitConversionFieldComponent] });
-UnitConversionFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UnitConversionFieldModule, imports: [CommonModule,
-        InfoModule,
-        OptionModule,
-        ReactiveFormsModule,
-        FieldContainerModule,
-        MatInputModule,
-        MatSelectModule,
-        MatOptionModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: UnitConversionFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        InfoModule,
-                        OptionModule,
-                        ReactiveFormsModule,
-                        FieldContainerModule,
-                        MatInputModule,
-                        MatSelectModule,
-                        MatOptionModule,
-                    ],
-                    exports: [
-                        UnitConversionFieldComponent
-                    ],
-                    declarations: [
-                        UnitConversionFieldComponent
-                    ]
-                }]
-        }] });
-
-class FileDropzoneDirective {
-    constructor() {
-        this.fileDrop = new EventEmitter();
-        this.crisprFileDropzone = true;
-    }
-    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();
-        }
-    }
-}
-FileDropzoneDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FileDropzoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FileDropzoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: FileDropzoneDirective, selector: "[crisprFileDropzone]", inputs: { crisprFileDropzone: "crisprFileDropzone" }, outputs: { fileDrop: "fileDrop" }, host: { listeners: { "drop": "onDrop($event)", "dragover": "onDragOver($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FileDropzoneDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[crisprFileDropzone]'
-                }]
-        }], propDecorators: { fileDrop: [{
-                type: Output
-            }], crisprFileDropzone: [{
-                type: Input
-            }], onDrop: [{
-                type: HostListener,
-                args: ['drop', ['$event']]
-            }], onDragOver: [{
-                type: HostListener,
-                args: ['dragover', ['$event']]
-            }] } });
+import * as i2 from '@angular/forms';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import * as i3$1 from '@tft/form-validation-handler';
+import { FormValidationHandlerModule } from '@tft/form-validation-handler';
+import 'rxjs';
+import { isControlConfig, ControlType, buildFormGroupFromConfig, crisprControlMixin, CrisprFieldComponent, createControlForType } from '@tft/crispr-forms/utils';
+export * from '@tft/crispr-forms/utils';
+import * as i2$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@tft/crispr-forms/ui';
+import { FieldContainerComponent } from '@tft/crispr-forms/ui';
+export * from '@tft/crispr-forms/ui';
 
-class SelectedFileComponent {
-}
-SelectedFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectedFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectedFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: SelectedFileComponent, selector: "crispr-selected-file", inputs: { fileName: "fileName", progress: "progress", showProgress: "showProgress", color: "color" }, ngImport: i0, template: "<h3 class=\"mat-h3\">{{ fileName }}</h3>\n<mat-progress-bar\n  *ngIf=\"showProgress\"\n  mode=\"determinate\"\n  [color]=\"color\"\n  [value]=\"progress\">\n</mat-progress-bar>\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectedFileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-selected-file', template: "<h3 class=\"mat-h3\">{{ fileName }}</h3>\n<mat-progress-bar\n  *ngIf=\"showProgress\"\n  mode=\"determinate\"\n  [color]=\"color\"\n  [value]=\"progress\">\n</mat-progress-bar>\n", styles: ["mat-progress-bar{margin-bottom:8px}\n"] }]
-        }], propDecorators: { fileName: [{
-                type: Input
-            }], progress: [{
-                type: Input
-            }], showProgress: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-class SelectedFileModule {
+const FIELD_COMPONENTS = {
+    groupList: () => Promise.resolve().then(function () { return index$1; }).then(({ FormGroupListComponent }) => FormGroupListComponent),
+    subGroup: () => Promise.resolve().then(function () { return index; }).then(({ SubGroupComponent }) => SubGroupComponent),
+    button: () => import('@tft/crispr-forms/ui/button').then(({ ButtonComponent }) => ButtonComponent),
+    input: () => import('@tft/crispr-forms/ui/input-field').then(({ InputFieldComponent }) => InputFieldComponent),
+    select: () => import('@tft/crispr-forms/ui/select-field').then(({ SelectFieldComponent }) => SelectFieldComponent),
+    radio: () => import('@tft/crispr-forms/ui/radio-field').then(({ RadioFieldComponent }) => RadioFieldComponent),
+    autocomplete: () => import('@tft/crispr-forms/ui/autocomplete-field').then(({ AutocompleteFieldComponent }) => AutocompleteFieldComponent),
+    autocompleteChiplist: () => import('@tft/crispr-forms/ui/autocomplete-chiplist-field').then(({ AutocompleteChiplistFieldComponent }) => AutocompleteChiplistFieldComponent),
+    textarea: () => import('@tft/crispr-forms/ui/textarea-field').then(({ TextareaFieldComponent }) => TextareaFieldComponent),
+    checkbox: () => import('@tft/crispr-forms/ui/checkbox-field').then(({ CheckboxFieldComponent }) => CheckboxFieldComponent),
+    slider: () => import('@tft/crispr-forms/ui/slider-field').then(({ SliderFieldComponent }) => SliderFieldComponent),
+    datepicker: () => import('@tft/crispr-forms/ui/datepicker-field').then(({ DatepickerFieldComponent }) => DatepickerFieldComponent),
+    fileUpload: () => import('@tft/crispr-forms/ui/file-upload-field').then(({ FileUploadFieldComponent }) => FileUploadFieldComponent),
+    imageUpload: () => import('@tft/crispr-forms/ui/image-upload-field').then(({ ImageUploadFieldComponent }) => ImageUploadFieldComponent),
+    heading: () => import('@tft/crispr-forms/ui').then(({ HeadingComponent }) => HeadingComponent),
+    divider: () => import('@tft/crispr-forms/ui/divider').then(({ DividerComponent }) => DividerComponent),
+    unitConversion: () => import('@tft/crispr-forms/ui/unit-conversion-field').then(({ UnitConversionFieldComponent }) => UnitConversionFieldComponent)
+};
+function isControlComponent(component) {
+    return component && isControlConfig(component.config) && 'value' in component; // || component.config.controlType === ControlType.BUTTON;
 }
-SelectedFileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectedFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SelectedFileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: SelectedFileModule, declarations: [SelectedFileComponent], imports: [CommonModule,
-        MatProgressBarModule], exports: [SelectedFileComponent] });
-SelectedFileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectedFileModule, imports: [CommonModule,
-        MatProgressBarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SelectedFileModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatProgressBarModule
-                    ],
-                    exports: [
-                        SelectedFileComponent
-                    ],
-                    declarations: [
-                        SelectedFileComponent
-                    ]
-                }]
-        }] });
+function isControlOrButtonComponent(component) {
+    return isControlComponent(component) || component.config.controlType === ControlType.BUTTON;
+}
 
-const FileUploadFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class FileUploadFieldComponent extends FileUploadFieldMixin {
-    // ngControl: NgControl = null;
-    constructor(ngControl) {
-        super();
-        this.ngControl = ngControl;
-        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.isUploaded = false;
-        this.fileProgress = [];
-        if (this.ngControl != null) {
-            // Setting the value accessor directly (instead of using
-            // the providers) to avoid running into a circular import.
-            ngControl.valueAccessor = this;
-        }
+class CrisprFieldDirective {
+    constructor(container, renderer, cdr) {
+        this.container = container;
+        this.renderer = renderer;
+        this.cdr = cdr;
     }
-    ngOnInit() {
-        super.ngOnInit();
-        this.disabled$ = this.config.disabledCallback
-            ? this.config.disabledCallback(this.group, this.config)
-            : of(false);
+    set value(value) {
+        this._value = value;
+        // This is needed to keep the group list from resetting control values to the initial input value
+        this.updateComponentValue(value);
     }
-    filesChanged(files) {
-        if (files && files.length > 0) {
-            this.selectedFiles = files;
-            this.control.patchValue(files);
-        }
+    ;
+    get value() {
+        return this._value;
     }
-    uploadFiles() {
-        if (this.selectedFiles && this.config.uploadFiles) {
-            this.isUploaded = true;
-            this.config.uploadFiles(this.group, this.selectedFiles, this);
+    async ngOnInit() {
+        /**
+         * create component and set values from config on its instance
+         */
+        const component = this.config.component || await FIELD_COMPONENTS[this.config.controlType]();
+        const componentRef = this.container.createComponent(component);
+        this.component = componentRef.instance;
+        this.component.config = this.config;
+        if (isControlOrButtonComponent(this.component)) {
+            this.component.group = this.group;
         }
-    }
-    resetFileInput() {
-        this.fileInputRef.nativeElement.value = '';
-        this.control.patchValue(null);
-        this.isUploaded = false;
-    }
-    writeValue(value) {
-        // clear file input
-        // this.host.nativeElement.value = '';
-        // this.file = null;
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-    }
-}
-FileUploadFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FileUploadFieldComponent, deps: [{ token: i4.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-FileUploadFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: FileUploadFieldComponent, selector: "crispr-file-upload-field", viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field floatLabel=\"always\"\n    [color]=\"config.color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config.disableOnUpload && isUploaded)\"\n    [formGroup]=\"group\"\n    (fileDrop)=\"filesChanged($event)\">\n\n    <input [formControlName]=\"config.controlName\" matInput type=\"text\"/>\n    <input\n      #fileInput\n      type=\"file\"\n      style=\"display: none\"\n      [accept]=\"config.acceptedTypes\"\n      [multiple]=\"config.allowMultipleFiles\"\n      (change)=\"filesChanged($event.target.files)\"/>\n    <mat-label>{{config.label}}</mat-label>\n\n    <div *ngIf=\"!(selectedFiles?.length > 0); else selectedFileList\"  class=\"drop-info\">\n      <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n      <h2 class=\"mat-h2\">{{config.dropZoneText}}</h2>\n      or\n      <button\n        mat-raised-button\n        type=\"button\"\n        color=\"primary\"\n        [disabled]=\"(disabled$ | async) || config.disableOnUpload && isUploaded\"\n        (click)=\"fileInput.click()\"\n        [attr.aria-label]=\"config.controlName\">\n        {{config.selectButtonText}}\n      </button>\n    </div>\n    <ng-template #selectedFileList>\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          <crispr-selected-file\n            *ngFor=\"let file of selectedFiles; let i = index;\"\n            [color]=\"config.color === 'primary' ? 'accent' : 'primary'\"\n            [fileName]=\"file.name\"\n            [showProgress]=\"config.showUploadProgress\"\n            [progress]=\"fileProgress && (fileProgress[i] | async)\">\n          </crispr-selected-file>\n        </div>\n\n      </div>\n    </ng-template>\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n  </mat-form-field>\n  <div class=\"button-container\" *ngIf=\"selectedFiles?.length > 0\">\n\n    <button\n      mat-button\n      (click)=\"resetFileInput()\"\n      type=\"button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      aria-label=\"Remove Selected File(s)\">\n      {{config.clearFilesButtonText}}\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"!!config.uploadFiles\"\n      mat-raised-button\n      type=\"button\"\n      color=\"accent\"\n      class=\"file-input-button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      (click)=\"uploadFiles()\"\n      [attr.aria-label]=\"config.uploadButtonText\">\n      {{ config.uploadButtonText }}\n    </button>\n\n  </div>\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-form-field .mat-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: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return FieldContainerComponent; }), selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.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: i0.forwardRef(function () { return i4.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i0.forwardRef(function () { return i3.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(function () { return i2.MatButton; }), selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i0.forwardRef(function () { return i5.MatFormField; }), selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatHint; }), selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.MatLabel; }), selector: "mat-label" }, { kind: "directive", type: i0.forwardRef(function () { return i6.MatInput; }), selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i0.forwardRef(function () { return SelectedFileComponent; }), selector: "crispr-selected-file", inputs: ["fileName", "progress", "showProgress", "color"] }, { kind: "directive", type: i0.forwardRef(function () { return i9.ControlErrorsDirective; }), selector: "[formControl], [formControlName]" }, { kind: "directive", type: i0.forwardRef(function () { return i9.ControlErrorContainerDirective; }), selector: "[controlErrorContainer], [formGroup]" }, { kind: "directive", type: i0.forwardRef(function () { return FileDropzoneDirective; }), selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }, { kind: "pipe", type: i0.forwardRef(function () { return i1.AsyncPipe; }), name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FileUploadFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-file-upload-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <mat-form-field floatLabel=\"always\"\n    [color]=\"config.color\"\n    appearance=\"outline\"\n    [crisprFileDropzone]=\"!(disabled$ | async) && !(config.disableOnUpload && isUploaded)\"\n    [formGroup]=\"group\"\n    (fileDrop)=\"filesChanged($event)\">\n\n    <input [formControlName]=\"config.controlName\" matInput type=\"text\"/>\n    <input\n      #fileInput\n      type=\"file\"\n      style=\"display: none\"\n      [accept]=\"config.acceptedTypes\"\n      [multiple]=\"config.allowMultipleFiles\"\n      (change)=\"filesChanged($event.target.files)\"/>\n    <mat-label>{{config.label}}</mat-label>\n\n    <div *ngIf=\"!(selectedFiles?.length > 0); else selectedFileList\"  class=\"drop-info\">\n      <mat-icon class=\"drop-icon\" inline=\"true\">cloud_upload</mat-icon>\n      <h2 class=\"mat-h2\">{{config.dropZoneText}}</h2>\n      or\n      <button\n        mat-raised-button\n        type=\"button\"\n        color=\"primary\"\n        [disabled]=\"(disabled$ | async) || config.disableOnUpload && isUploaded\"\n        (click)=\"fileInput.click()\"\n        [attr.aria-label]=\"config.controlName\">\n        {{config.selectButtonText}}\n      </button>\n    </div>\n    <ng-template #selectedFileList>\n      <div class=\"selected-files-container\">\n        <div class=\"selected-files-list\">\n          <crispr-selected-file\n            *ngFor=\"let file of selectedFiles; let i = index;\"\n            [color]=\"config.color === 'primary' ? 'accent' : 'primary'\"\n            [fileName]=\"file.name\"\n            [showProgress]=\"config.showUploadProgress\"\n            [progress]=\"fileProgress && (fileProgress[i] | async)\">\n          </crispr-selected-file>\n        </div>\n\n      </div>\n    </ng-template>\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n  </mat-form-field>\n  <div class=\"button-container\" *ngIf=\"selectedFiles?.length > 0\">\n\n    <button\n      mat-button\n      (click)=\"resetFileInput()\"\n      type=\"button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      aria-label=\"Remove Selected File(s)\">\n      {{config.clearFilesButtonText}}\n      <mat-icon>delete</mat-icon>\n    </button>\n\n    <button\n      *ngIf=\"!!config.uploadFiles\"\n      mat-raised-button\n      type=\"button\"\n      color=\"accent\"\n      class=\"file-input-button\"\n      [disabled]=\"(disabled$ | async) || (config.disableOnUpload && isUploaded)\"\n      (click)=\"uploadFiles()\"\n      [attr.aria-label]=\"config.uploadButtonText\">\n      {{ config.uploadButtonText }}\n    </button>\n\n  </div>\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-form-field .mat-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: function () { return [{ type: i4.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }]; }, propDecorators: { fileInputRef: [{
-                type: ViewChild,
-                args: ['fileInput']
-            }] } });
-class FileUploadFieldModule {
-}
-FileUploadFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FileUploadFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileUploadFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: FileUploadFieldModule, declarations: [FileUploadFieldComponent, FileDropzoneDirective], imports: [CommonModule,
-        FieldContainerModule,
-        ReactiveFormsModule,
-        MatIconModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatInputModule,
-        SelectedFileModule,
-        FormValidationHandlerModule], exports: [FileUploadFieldComponent, FileDropzoneDirective] });
-FileUploadFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FileUploadFieldModule, imports: [CommonModule,
-        FieldContainerModule,
-        ReactiveFormsModule,
-        MatIconModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatInputModule,
-        SelectedFileModule,
-        FormValidationHandlerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FileUploadFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FieldContainerModule,
-                        ReactiveFormsModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        SelectedFileModule,
-                        FormValidationHandlerModule,
-                    ],
-                    exports: [
-                        FileUploadFieldComponent,
-                        FileDropzoneDirective
-                    ],
-                    declarations: [
-                        FileUploadFieldComponent,
-                        FileDropzoneDirective
-                    ]
-                }]
-        }] });
-
-function convertBytesToMb(bytes) {
-    return bytes / 1048576;
-}
-
-const ImageUploadFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class ImageUploadFieldComponent extends ImageUploadFieldMixin {
-    constructor(ngControl, domSanitizer, cdr) {
-        super();
-        this.ngControl = ngControl;
-        this.domSanitizer = domSanitizer;
-        this.cdr = cdr;
-        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: .4,
-            minCompressionThresholdMb: .6,
-            useWebWorker: true,
-        };
-        this.inputImageFileSubject = new Subject();
-        this.inputImageFile$ = this.inputImageFileSubject.asObservable().pipe(shareReplay(1));
-        this.compressedFile$ = this.inputImageFile$.pipe(switchMap(async (file) => {
-            if (!file || !(file instanceof File))
-                return null;
-            const { compressImage, targetCompressedImageFileSizeMb, minCompressionThresholdMb, maxWidthOrHeight, useWebWorker } = this.config;
-            const fileSizeMb = convertBytesToMb(file.size);
-            const shouldCompress = compressImage
-                && targetCompressedImageFileSizeMb < fileSizeMb
-                && minCompressionThresholdMb < fileSizeMb;
-            if (shouldCompress) {
-                const options = {
-                    // Use maxWidthOrHeight if it was provided, else use target compressed size
-                    ...(maxWidthOrHeight ? { maxWidthOrHeight } : { maxSizeMB: targetCompressedImageFileSizeMb }),
-                    useWebWorker,
-                    maxIterations: 30,
-                    onProgress: (progress) => {
-                        this.progress = progress;
-                        this.cdr.detectChanges();
-                    }
-                };
-                return await imageCompression(file, options);
-            }
-            else
-                return file;
-        }), map((compressedFile) => {
-            if (!compressedFile)
-                return compressedFile;
-            const { type, name, lastModified } = compressedFile;
-            return new File([compressedFile], this.config.fileName || name, {
-                type,
-                lastModified
-            });
-        }), tap(file => {
-            // 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
-            if (file) {
-                this.control.setValue(file);
+        this.updateComponentValue(this.value);
+        // adds any config classes to the dynamically generated component
+        // doing this here keeps us from having to extend a base component into each field component individually
+        if (!this.config.classes)
+            return;
+        this.config.classes.forEach((klass) => {
+            // check for passing multiple classes in one array element
+            if (klass.includes(' ')) {
+                throw Error(`Improperly formatted class. '${klass}' cannot contain spaces.`);
             }
-            if (file || this.value) {
-                this.control.markAsTouched();
-                setTimeout(() => {
-                    this.cdr.detectChanges();
-                }, 100);
+            else {
+                this.renderer.addClass(componentRef.location.nativeElement, klass);
             }
-        }), shareReplay(1));
-        this.compressedImageUrlString$ = this.compressedFile$.pipe(switchMap(async (file) => {
-            if (!file)
-                return null;
-            const compressedStringImage = await imageCompression.getDataUrlFromFile(file);
-            return this.domSanitizer.bypassSecurityTrustResourceUrl(compressedStringImage);
-        }), shareReplay(1));
-        this.isUploaded = false;
-        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.imageSrcUrl$ = combineLatest([
-            this.compressedImageUrlString$.pipe(startWith(null)),
-            this.control.valueChanges.pipe(startWith(this.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, this.config)
-            : of(false);
+        });
     }
-    filesChanged(files) {
-        if (files && files.length > 0) {
-            const imageFile = files[0];
-            // We clear the control here so that it is invalid while compressing
-            // the input pipeline will take care of resetting it
-            this.control.patchValue(null);
-            // this.control.setErrors({compressing: {loadingMessage: 'Please wait while file compresses'}});
-            this.control.markAsTouched();
-            this.inputImageFileSubject.next(imageFile);
+    updateComponentValue(value) {
+        if (isControlComponent(this.component)) {
+            this.component.value = value;
+            // SubGroups won't populate without this detectChanges
+            this.cdr.detectChanges();
         }
     }
-    clearFileInput() {
-        this.inputImageFileSubject.next(null);
-        this.fileInputRef.nativeElement.value = '';
-        this.control.patchValue(null);
-        this.control.markAsTouched();
-        this.isUploaded = false;
-    }
-    resetToInitialValue(initialValue) {
-        this.inputImageFileSubject.next(null);
-        this.control.patchValue(initialValue);
-        this.isUploaded = false;
-    }
-    writeValue(value) { }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) { }
-}
-ImageUploadFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ImageUploadFieldComponent, deps: [{ token: i4.NgControl, optional: true, self: true }, { token: i2$3.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ImageUploadFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: ImageUploadFieldComponent, selector: "crispr-image-upload-field", viewQueries: [{ propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field floatLabel=\"always\"\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        <crispr-selected-file\n          *ngIf=\"(progress < 100) && inputImageFile$ | async as file; else dropzoneOrPreview\"\n          [color]=\"config.color === 'primary' ? 'accent' : 'primary'\"\n          [fileName]=\"'Compressing: ' + file.name\"\n          [showProgress]=\"true\"\n          [progress]=\"progress\">\n        </crispr-selected-file>\n\n        <ng-template #dropzoneOrPreview>\n          <!-- <img *ngIf=\"(initialUrlString$ | async) as initialUrlString;\" [src]=\"initialUrlString\" alt=\"\"> -->\n          <img *ngIf=\"imageSrcUrl$ | async as srcUrl; else noImage\" [src]=\"srcUrl\" alt=\"\">\n          <ng-template #noImage>\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          </ng-template>\n\n        </ng-template>\n      </div>\n\n\n\n      <!-- </ng-template> -->\n      <div class=\"button-container\" *ngIf=\"true\">\n\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\n        <button\n          *ngIf=\"value\"\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    </div>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-form-field .mat-form-field-infix{padding-top:0}:host ::ng-deep .mat-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 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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: SelectedFileComponent, selector: "crispr-selected-file", inputs: ["fileName", "progress", "showProgress", "color"] }, { kind: "directive", type: FileDropzoneDirective, selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }, { kind: "directive", type: i9.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { kind: "directive", type: i9.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ImageUploadFieldComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'crispr-image-upload-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n\n  <mat-form-field floatLabel=\"always\"\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        <crispr-selected-file\n          *ngIf=\"(progress < 100) && inputImageFile$ | async as file; else dropzoneOrPreview\"\n          [color]=\"config.color === 'primary' ? 'accent' : 'primary'\"\n          [fileName]=\"'Compressing: ' + file.name\"\n          [showProgress]=\"true\"\n          [progress]=\"progress\">\n        </crispr-selected-file>\n\n        <ng-template #dropzoneOrPreview>\n          <!-- <img *ngIf=\"(initialUrlString$ | async) as initialUrlString;\" [src]=\"initialUrlString\" alt=\"\"> -->\n          <img *ngIf=\"imageSrcUrl$ | async as srcUrl; else noImage\" [src]=\"srcUrl\" alt=\"\">\n          <ng-template #noImage>\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          </ng-template>\n\n        </ng-template>\n      </div>\n\n\n\n      <!-- </ng-template> -->\n      <div class=\"button-container\" *ngIf=\"true\">\n\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\n        <button\n          *ngIf=\"value\"\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    </div>\n\n    <mat-hint *ngIf=\"config.hint && (control.valid || !control.touched)\">{{config.hint}}</mat-hint>\n\n  </mat-form-field>\n\n</crispr-field-container>\n", styles: [":host ::ng-deep .mat-form-field .mat-form-field-infix{padding-top:0}:host ::ng-deep .mat-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 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: function () { return [{ type: i4.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i2$3.DomSanitizer }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { fileInputRef: [{
-                type: ViewChild,
-                args: ['fileInput']
-            }] } });
-class ImageUploadFieldModule {
-}
-ImageUploadFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ImageUploadFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ImageUploadFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: ImageUploadFieldModule, declarations: [ImageUploadFieldComponent], imports: [CommonModule,
-        FieldContainerModule,
-        ReactiveFormsModule,
-        MatIconModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatInputModule,
-        SelectedFileModule,
-        FileUploadFieldModule,
-        FormValidationHandlerModule], exports: [ImageUploadFieldComponent] });
-ImageUploadFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ImageUploadFieldModule, imports: [CommonModule,
-        FieldContainerModule,
-        ReactiveFormsModule,
-        MatIconModule,
-        MatButtonModule,
-        MatFormFieldModule,
-        MatInputModule,
-        SelectedFileModule,
-        FileUploadFieldModule,
-        FormValidationHandlerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: ImageUploadFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FieldContainerModule,
-                        ReactiveFormsModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        SelectedFileModule,
-                        FileUploadFieldModule,
-                        FormValidationHandlerModule
-                    ],
-                    exports: [
-                        ImageUploadFieldComponent
-                    ],
-                    declarations: [
-                        ImageUploadFieldComponent
-                    ]
-                }]
-        }] });
-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;
-        }
-    };
-}
-
-// TODO: Should we import UI library?
-// Will the tree shaker shake the unused modules?
-class MaterialModule {
 }
-MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        FormValidationHandlerModule,
-        InfoModule,
-        CheckboxFieldModule,
-        SelectFieldModule,
-        AutocompleteFieldModule,
-        AutocompleteChiplistFieldModule,
-        DatepickerFieldModule,
-        InputFieldModule,
-        FileUploadFieldModule,
-        RadioFieldModule,
-        SliderFieldModule,
-        TextareaFieldModule,
-        UnitConversionFieldModule,
-        ButtonModule,
-        DividerModule,
-        HeadingModule,
-        FieldContainerModule,
-        OptionModule] });
-MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, imports: [CommonModule,
-        ReactiveFormsModule,
-        FormValidationHandlerModule,
-        InfoModule,
-        CheckboxFieldModule,
-        SelectFieldModule,
-        AutocompleteFieldModule,
-        AutocompleteChiplistFieldModule,
-        DatepickerFieldModule,
-        InputFieldModule,
-        FileUploadFieldModule,
-        RadioFieldModule,
-        SliderFieldModule,
-        TextareaFieldModule,
-        UnitConversionFieldModule,
-        ButtonModule,
-        DividerModule,
-        HeadingModule,
-        FieldContainerModule,
-        OptionModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: MaterialModule, decorators: [{
-            type: NgModule,
+CrisprFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+CrisprFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.1", type: CrisprFieldDirective, isStandalone: true, selector: "[crisprField]", inputs: { config: "config", group: "group", value: "value" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFieldDirective, decorators: [{
+            type: Directive,
             args: [{
-                    imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        FormValidationHandlerModule,
-                        InfoModule,
-                        CheckboxFieldModule,
-                        SelectFieldModule,
-                        AutocompleteFieldModule,
-                        AutocompleteChiplistFieldModule,
-                        DatepickerFieldModule,
-                        InputFieldModule,
-                        FileUploadFieldModule,
-                        RadioFieldModule,
-                        SliderFieldModule,
-                        TextareaFieldModule,
-                        UnitConversionFieldModule,
-                        ButtonModule,
-                        DividerModule,
-                        HeadingModule,
-                        FieldContainerModule,
-                        OptionModule,
-                    ],
+                    selector: '[crisprField]',
+                    standalone: true
                 }]
-        }] });
-
-var index$2 = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    InputFieldComponent: InputFieldComponent,
-    InputFieldModule: InputFieldModule,
-    SelectFieldComponent: SelectFieldComponent,
-    SelectFieldModule: SelectFieldModule,
-    AutocompleteFieldComponent: AutocompleteFieldComponent,
-    AutocompleteFieldModule: AutocompleteFieldModule,
-    AutocompleteChiplistFieldComponent: AutocompleteChiplistFieldComponent,
-    AutocompleteChiplistFieldModule: AutocompleteChiplistFieldModule,
-    CheckboxFieldComponent: CheckboxFieldComponent,
-    CheckboxFieldModule: CheckboxFieldModule,
-    TextareaFieldComponent: TextareaFieldComponent,
-    TextareaFieldModule: TextareaFieldModule,
-    SliderFieldComponent: SliderFieldComponent,
-    SliderFieldModule: SliderFieldModule,
-    ButtonComponent: ButtonComponent,
-    ButtonModule: ButtonModule,
-    DatepickerFieldComponent: DatepickerFieldComponent,
-    DatepickerFieldModule: DatepickerFieldModule,
-    HeadingComponent: HeadingComponent,
-    HeadingModule: HeadingModule,
-    DividerComponent: DividerComponent,
-    DividerModule: DividerModule,
-    RadioFieldComponent: RadioFieldComponent,
-    RadioFieldModule: RadioFieldModule,
-    UnitConversionFieldComponent: UnitConversionFieldComponent,
-    UnitConversionFieldModule: UnitConversionFieldModule,
-    ImageUploadFieldComponent: ImageUploadFieldComponent,
-    ImageUploadFieldModule: ImageUploadFieldModule,
-    maxFileSizeValidator: maxFileSizeValidator,
-    allowedFileExtValidator: allowedFileExtValidator,
-    allowedFileType: allowedFileType,
-    FileDropzoneDirective: FileDropzoneDirective,
-    FileUploadFieldComponent: FileUploadFieldComponent,
-    FileUploadFieldModule: FileUploadFieldModule,
-    MaterialModule: MaterialModule,
-    OptionComponent: OptionComponent,
-    OptionModule: OptionModule
-});
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], group: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
 
 class InitialControlValuePipe {
     // TODO: does changing any to unknown break anything?
@@ -2091,10 +167,16 @@ class CrisprFormComponent {
     }
 }
 CrisprFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CrisprFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: CrisprFormComponent, selector: "crispr-form", inputs: { config: "config", form: "form", value: "value" }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true }], ngImport: i0, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { kind: "directive", type: i9.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true });
+CrisprFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: CrisprFormComponent, isStandalone: true, selector: "crispr-form", inputs: { config: "config", form: "form", value: "value" }, outputs: { submitted: "submitted", valueChanges: "valueChanges", statusChanges: "statusChanges" }, viewQueries: [{ propertyName: "submitTrigger", first: true, predicate: ["submitTrigger"], descendants: true }], ngImport: i0, template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i3$1.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { kind: "directive", type: i3$1.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-form', template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]
+            args: [{ selector: 'crispr-form', standalone: true, imports: [
+                        CommonModule,
+                        CrisprFieldDirective,
+                        ReactiveFormsModule,
+                        FormValidationHandlerModule,
+                        CrisprPipesModule
+                    ], template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\"\n  #ngFormElement=\"ngForm\">\n\n  <ng-container\n    *ngFor=\"let field of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : field\"\n    [config]=\"field\"\n    [group]=\"form\">\n  </ng-container>\n  <!-- Hidden button, programmatically clicked when crispr form triggerSubmit function called.\n    Uses a hidden button with type=\"submit\" because it will trigger both native form submit event\n    (which the error handler has to listen for) and ngSubmit event  -->\n  <button #submitTrigger class=\"submit-trigger\" type=\"submit\">\n  </button>\n</form>\n", styles: [".submit-trigger{display:none}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], form: [{
@@ -2110,38 +192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
             }], submitTrigger: [{
                 type: ViewChild,
                 args: ['submitTrigger']
-            }] } });
-class CrisprFormModule {
-}
-CrisprFormModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CrisprFormModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: CrisprFormModule, declarations: [CrisprFormComponent], imports: [CommonModule,
-        CrisprFieldModule,
-        ReactiveFormsModule,
-        FormValidationHandlerModule,
-        CrisprPipesModule], exports: [CrisprFormComponent] });
-CrisprFormModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFormModule, imports: [CommonModule,
-        CrisprFieldModule,
-        ReactiveFormsModule,
-        FormValidationHandlerModule,
-        CrisprPipesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFormModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CrisprFieldModule,
-                        ReactiveFormsModule,
-                        FormValidationHandlerModule,
-                        CrisprPipesModule
-                    ],
-                    exports: [
-                        CrisprFormComponent
-                    ],
-                    declarations: [
-                        CrisprFormComponent
-                    ]
-                }]
-        }] });
+            }] } });
 
 const defaultConfig = {
     addButtonLabel: 'ADD ITEM',
@@ -2202,57 +253,24 @@ class FormGroupListComponent extends FormGroupListMixin {
     }
 }
 FormGroupListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FormGroupListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FormGroupListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: FormGroupListComponent, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <div *ngFor=\"let con of control?.controls; let i = index;\">\n      <!-- TODO: use content projection to allow custom item label component -->\n      <div class=\"item-header\">\n        <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n        <button\n          mat-icon-button\n          type=\"button\"\n          *ngIf=\"i + 1 > config.minListLength\">\n          <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n        </button>\n      </div>\n      <div\n        [formGroup]=\"con\">\n        <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n          [config]=\"field\"\n          [group]=\"con\">\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"clickAdd()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "directive", type: i9.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+FormGroupListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: FormGroupListComponent, isStandalone: true, selector: "crispr-form-group-list", usesInheritance: true, ngImport: i0, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <div *ngFor=\"let con of control?.controls; let i = index;\">\n      <!-- TODO: use content projection to allow custom item label component -->\n      <div class=\"item-header\">\n        <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n        <button\n          mat-icon-button\n          type=\"button\"\n          *ngIf=\"i + 1 > config.minListLength\">\n          <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n        </button>\n      </div>\n      <div\n        [formGroup]=\"con\">\n        <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n          [config]=\"field\"\n          [group]=\"con\">\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"clickAdd()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "ngmodule", type: CrisprPipesModule }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }, { kind: "ngmodule", type: FormValidationHandlerModule }, { kind: "directive", type: i3$1.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FormGroupListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'crispr-form-group-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <div *ngFor=\"let con of control?.controls; let i = index;\">\n      <!-- TODO: use content projection to allow custom item label component -->\n      <div class=\"item-header\">\n        <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n        <button\n          mat-icon-button\n          type=\"button\"\n          *ngIf=\"i + 1 > config.minListLength\">\n          <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n        </button>\n      </div>\n      <div\n        [formGroup]=\"con\">\n        <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n          [config]=\"field\"\n          [group]=\"con\">\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"clickAdd()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
-
-class FormGroupListModule {
-}
-FormGroupListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FormGroupListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FormGroupListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: FormGroupListModule, declarations: [FormGroupListComponent], imports: [CommonModule,
-        MatButtonModule,
-        MatIconModule,
-        FieldContainerModule,
-        ReactiveFormsModule,
-        CrisprFieldModule,
-        CrisprPipesModule,
-        FormValidationHandlerModule], exports: [FormGroupListComponent] });
-FormGroupListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FormGroupListModule, imports: [CommonModule,
-        MatButtonModule,
-        MatIconModule,
-        FieldContainerModule,
-        ReactiveFormsModule,
-        CrisprFieldModule,
-        CrisprPipesModule,
-        FormValidationHandlerModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: FormGroupListModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
+            args: [{ selector: 'crispr-form-group-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         CommonModule,
                         MatButtonModule,
                         MatIconModule,
-                        FieldContainerModule,
+                        FieldContainerComponent,
                         ReactiveFormsModule,
-                        CrisprFieldModule,
+                        CrisprFieldDirective,
                         CrisprPipesModule,
                         FormValidationHandlerModule
-                    ],
-                    exports: [
-                        FormGroupListComponent
-                    ],
-                    declarations: [
-                        FormGroupListComponent
-                    ]
-                }]
-        }] });
+                    ], template: "\n<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\"\n  [formGroup]=\"group\">\n\n  <div [formArrayName]=\"config.controlName\">\n    <!-- Don't add trackBy function, it confuses the state of the array -->\n    <div *ngFor=\"let con of control?.controls; let i = index;\">\n      <!-- TODO: use content projection to allow custom item label component -->\n      <div class=\"item-header\">\n        <span class=\"mat-h2\"> {{ config.itemLabelBuilder ? config.itemLabelBuilder(i) : 'Item ' + (i + 1) }} </span>\n        <button\n          mat-icon-button\n          type=\"button\"\n          *ngIf=\"i + 1 > config.minListLength\">\n          <mat-icon (click)=\"clickDelete(i)\">delete</mat-icon>\n        </button>\n      </div>\n      <div\n        [formGroup]=\"con\">\n        <!-- TODO: if chiplists didn't need to have labels mixed in with their values we could use [value]=\"control.value\" below -->\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [value]=\"blockValue ? null : value && value[i] | initialControlValue : field\"\n          [config]=\"field\"\n          [group]=\"con\">\n        </ng-container>\n      </div>\n    </div>\n  </div>\n  <div class=\"group-footer\">\n    <button\n      type=\"button\"\n      class=\"add\"\n      mat-raised-button\n      [color]=\"config.addButtonColor\"\n      (click)=\"clickAdd()\">\n      {{config.addItemLabel || config.addButtonLabel}}\n    </button>\n  </div>\n\n</crispr-field-container>\n", styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
 var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    FormGroupListComponent: FormGroupListComponent,
-    FormGroupListModule: FormGroupListModule
+    FormGroupListComponent: FormGroupListComponent
 });
 
 const FormGroupMixin = crisprControlMixin(CrisprFieldComponent);
@@ -2262,7 +280,7 @@ class SubGroupComponent extends FormGroupMixin {
     }
 }
 SubGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SubGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SubGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: SubGroupComponent, selector: "crispr-sub-group", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <ng-container\n    *ngFor=\"let fieldConfig of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : fieldConfig\"\n    [config]=\"fieldConfig\"\n    [group]=\"control\">\n  </ng-container>\n</crispr-field-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "component", type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true });
+SubGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.1", type: SubGroupComponent, selector: "crispr-sub-group", usesInheritance: true, ngImport: i0, template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <ng-container\n    *ngFor=\"let fieldConfig of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : fieldConfig\"\n    [config]=\"fieldConfig\"\n    [group]=\"control\">\n  </ng-container>\n</crispr-field-container>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }, { kind: "component", type: i3.FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { kind: "pipe", type: InitialControlValuePipe, name: "initialControlValue" }], preserveWhitespaces: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SubGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'crispr-sub-group', template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <ng-container\n    *ngFor=\"let fieldConfig of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : fieldConfig\"\n    [config]=\"fieldConfig\"\n    [group]=\"control\">\n  </ng-container>\n</crispr-field-container>\n\n" }]
@@ -2272,14 +290,13 @@ class SubGroupModule {
 }
 SubGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SubGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 SubGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: SubGroupModule, declarations: [SubGroupComponent], imports: [CommonModule,
-        CrisprFieldModule,
-        FieldContainerModule,
+        CrisprFieldDirective,
+        FieldContainerComponent,
         CrisprPipesModule,
         // TODO: Does this need to be here?
         FormValidationHandlerModule], exports: [SubGroupComponent] });
 SubGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: SubGroupModule, imports: [CommonModule,
-        CrisprFieldModule,
-        FieldContainerModule,
+        FieldContainerComponent,
         CrisprPipesModule,
         // TODO: Does this need to be here?
         FormValidationHandlerModule] });
@@ -2288,8 +305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
             args: [{
                     imports: [
                         CommonModule,
-                        CrisprFieldModule,
-                        FieldContainerModule,
+                        CrisprFieldDirective,
+                        FieldContainerComponent,
                         CrisprPipesModule,
                         // TODO: Does this need to be here?
                         FormValidationHandlerModule
@@ -2315,27 +332,21 @@ CrisprFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versio
 CrisprFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.1", ngImport: i0, type: CrisprFormsModule, imports: [CommonModule,
         ReactiveFormsModule,
         FormValidationHandlerModule,
-        FormGroupListModule,
-        FieldContainerModule,
-        CrisprFieldModule,
+        FormGroupListComponent,
+        FieldContainerComponent,
+        CrisprFieldDirective,
         SubGroupModule,
-        MaterialModule,
         CrisprPipesModule,
-        CrisprFormModule], exports: [CrisprFormModule,
-        FieldContainerModule,
-        MaterialModule] });
+        CrisprFormComponent], exports: [CrisprFormComponent,
+        FieldContainerComponent] });
 CrisprFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFormsModule, imports: [CommonModule,
         ReactiveFormsModule,
         FormValidationHandlerModule,
-        FormGroupListModule,
-        FieldContainerModule,
-        CrisprFieldModule,
+        FormGroupListComponent,
+        FieldContainerComponent,
         SubGroupModule,
-        MaterialModule,
         CrisprPipesModule,
-        CrisprFormModule, CrisprFormModule,
-        FieldContainerModule,
-        MaterialModule] });
+        CrisprFormComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImport: i0, type: CrisprFormsModule, decorators: [{
             type: NgModule,
             args: [{
@@ -2343,18 +354,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
                         CommonModule,
                         ReactiveFormsModule,
                         FormValidationHandlerModule,
-                        FormGroupListModule,
-                        FieldContainerModule,
-                        CrisprFieldModule,
+                        FormGroupListComponent,
+                        FieldContainerComponent,
+                        CrisprFieldDirective,
                         SubGroupModule,
-                        MaterialModule,
                         CrisprPipesModule,
-                        CrisprFormModule
+                        CrisprFormComponent
                     ],
                     exports: [
-                        CrisprFormModule,
-                        FieldContainerModule,
-                        MaterialModule
+                        CrisprFormComponent,
+                        FieldContainerComponent,
+                        // MaterialModule
                     ]
                 }]
         }] });
@@ -2363,5 +373,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractAutocompleteComponent, AutocompleteChiplistFieldComponent, AutocompleteChiplistFieldModule, AutocompleteFieldComponent, AutocompleteFieldModule, ButtonComponent, ButtonModule, CheckboxFieldComponent, CheckboxFieldModule, ControlType, CrisprFieldComponent, CrisprFormComponent, CrisprFormModule, CrisprFormsModule, DEFAULT_EMPTY_OPTIONS_MESSAGE, DatepickerFieldComponent, DatepickerFieldModule, DividerComponent, DividerModule, FieldContainerComponent, FieldContainerModule, FileDropzoneDirective, FileUploadFieldComponent, FileUploadFieldModule, HeadingComponent, HeadingModule, ImageUploadFieldComponent, ImageUploadFieldModule, InputFieldComponent, InputFieldModule, MaterialModule, OptionComponent, OptionModule, RadioFieldComponent, RadioFieldModule, SelectFieldComponent, SelectFieldModule, SliderFieldComponent, SliderFieldModule, TextareaFieldComponent, TextareaFieldModule, UnitConversionFieldComponent, UnitConversionFieldModule, allowedFileExtValidator, allowedFileType, buildFormGroupFromConfig, callOptionsIfFunction, checkControlForValues, checkControlsForValues, computeValueFromFields, createControlForType, crisprControlMixin, filterOptionsByLabel, isControlConfig, maxFileSizeValidator, observablifyOptions };
+export { CrisprFormComponent, CrisprFormsModule };
 //# sourceMappingURL=tft-crispr-forms.mjs.map