@tft/crispr-forms 12.2.22 → 13.0.3

package/fesm2015/tft-crispr-forms.mjs

@@ -0,0 +1,1904 @@
+import { of, combineLatest, from, isObservable, BehaviorSubject, Subject } from 'rxjs';
+import * as i4$1 from '@angular/forms';
+import { FormGroup, FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { map, startWith, debounceTime, distinctUntilChanged, switchMap, tap, shareReplay } 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 i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i5 from '@tft/form-validation-handler';
+import { FormValidationHandlerModule } from '@tft/form-validation-handler';
+import * as i7 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i4$2 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i5$1 from '@angular/material/core';
+import * as i4$3 from '@angular/material/autocomplete';
+import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import { ENTER } from '@angular/cdk/keycodes';
+import * as i3$2 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i3$3 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i8 from '@angular/cdk/portal';
+import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
+import * as i3$4 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i1$1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i2$2 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import { __awaiter } from 'tslib';
+import imageCompression from 'browser-image-compression';
+import * as i1$2 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i2$3 from '@angular/platform-browser';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
+
+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 (_a) {
+        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
+    return 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([]);
+}
+/**
+ * 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) => {
+        var _a;
+        if (isControlConfig(controlConfig)) {
+            // then add a control to the group using the controlName from configuration
+            const { controlName } = controlConfig;
+            // 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 = (_a = (value && value[controlName])) !== null && _a !== void 0 ? _a : null;
+            group.addControl(controlName, createControlForType(controlConfig, controlValue));
+        }
+    });
+    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 ? Object.assign(Object.assign({}, this.defaultConfig), this.config) : this.config;
+    }
+}
+CrisprFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CrisprFieldComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: CrisprFieldComponent, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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), distinctUntilChanged(), map(searchText => searchText || ''), switchMap((searchText) => observablifyOptions(this.config.options, this.group, searchText)));
+    }
+}
+AbstractAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AbstractAutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+AbstractAutocompleteComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: AbstractAutocompleteComponent, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: AbstractAutocompleteComponent, decorators: [{
+            type: Directive
+        }] });
+
+class InfoComponent {
+}
+InfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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\n</mat-icon>\n", styles: ["mat-icon{font-size:1.2em;width:1em;height:1em;opacity:.8}\n"], components: [{ type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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\n</mat-icon>\n", styles: ["mat-icon{font-size:1.2em;width:1em;height:1em;opacity:.8}\n"] }]
+        }], propDecorators: { info: [{
+                type: Input
+            }] } });
+class InfoModule {
+}
+InfoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+InfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InfoModule, declarations: [InfoComponent], imports: [CommonModule,
+        MatIconModule,
+        MatTooltipModule], exports: [InfoComponent] });
+InfoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InfoModule, imports: [[
+            CommonModule,
+            MatIconModule,
+            MatTooltipModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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: "13.2.1", ngImport: i0, type: HeadingComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+HeadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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"], components: [{ type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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: "13.2.1", ngImport: i0, type: HeadingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+HeadingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: HeadingModule, declarations: [HeadingComponent], imports: [CommonModule,
+        MatFormFieldModule,
+        InfoModule], exports: [HeadingComponent] });
+HeadingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: HeadingModule, imports: [[
+            CommonModule,
+            MatFormFieldModule,
+            InfoModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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 keeps the form 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 === null || config === void 0 ? void 0 : 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: "13.2.1", ngImport: i0, type: FieldContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FieldContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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}.inline-field{display:inline-block}\n"], components: [{ type: HeadingComponent, selector: "crispr-heading", inputs: ["config"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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}.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: "13.2.1", ngImport: i0, type: FieldContainerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FieldContainerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FieldContainerModule, declarations: [FieldContainerComponent], imports: [CommonModule,
+        HeadingModule], exports: [FieldContainerComponent] });
+FieldContainerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FieldContainerModule, imports: [[
+            CommonModule,
+            HeadingModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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: "13.2.1", ngImport: i0, type: InputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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-form-field>\n\n\n</crispr-field-container>\n", styles: [""], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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-form-field>\n\n\n</crispr-field-container>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; } });
+
+class OptionComponent {
+}
+OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: OptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.1", type: OptionComponent, selector: "crispr-option", inputs: { option: "option" }, ngImport: i0, template: "<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", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: OptionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-option', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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", styles: [""] }]
+        }], propDecorators: { option: [{
+                type: Input
+            }] } });
+
+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() {
+        var _a, _b;
+        if (this.config.multiple
+            && this.config.enableToggleAll
+            && ((_a = this.selectField.options) === null || _a === void 0 ? void 0 : _a.length) === ((_b = this.value) === null || _b === void 0 ? void 0 : _b.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: "13.2.1", ngImport: i0, type: SelectFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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  </mat-form-field>\n\n</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}\n"], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: OptionComponent, selector: "crispr-option", inputs: ["option"] }, { type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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  </mat-form-field>\n\n</crispr-field-container>\n", styles: ["mat-checkbox{display:block;padding:16px}\n"] }]
+        }], propDecorators: { selectField: [{
+                type: ViewChild,
+                args: ['selectField']
+            }] } });
+
+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();
+    }
+    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) => {
+            var _a;
+            const label = !!options && Array.isArray(options)
+                ? (_a = options.find((option) => JSON.stringify(option.value) === JSON.stringify(value))) === null || _a === void 0 ? void 0 : _a.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: "13.2.1", ngImport: i0, type: AutocompleteFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AutocompleteFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\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$ | async\"\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  </mat-form-field>\n</crispr-field-container>\n", styles: [""], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: OptionComponent, selector: "crispr-option", inputs: ["option"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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    <mat-label *ngIf=\"config.label\">\n      {{config.label}}\n    </mat-label>\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$ | async\"\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  </mat-form-field>\n</crispr-field-container>\n", styles: [""] }]
+        }], propDecorators: { autoInput: [{
+                type: ViewChild,
+                args: ['autoInput', { read: MatAutocompleteTrigger }]
+            }], autoInputRef: [{
+                type: ViewChild,
+                args: ['autoInput']
+            }] } });
+
+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 === null || options === void 0 ? void 0 : 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) {
+        var _a;
+        if (this.chipInput.activeOption) {
+            this.chipInput.activeOption.select();
+        }
+        (_a = event.chipInput) === null || _a === void 0 ? void 0 : _a.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: "13.2.1", ngImport: i0, type: AutocompleteChiplistFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AutocompleteChiplistFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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    <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\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\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}\n"], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3$2.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: OptionComponent, selector: "crispr-option", inputs: ["option"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i3$2.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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    <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\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\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}\n"] }]
+        }], propDecorators: { chipInput: [{
+                type: ViewChild,
+                args: ['autoInput', { read: MatAutocompleteTrigger }]
+            }], chipInputRef: [{
+                type: ViewChild,
+                args: ['autoInput']
+            }] } });
+
+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: "13.2.1", ngImport: i0, type: CheckboxFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CheckboxFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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: [""], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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: [""] }]
+        }] });
+
+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: "13.2.1", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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  </mat-form-field>\n\n</crispr-field-container>\n", styles: [""], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: InfoComponent, selector: "crispr-info", inputs: ["info"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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  </mat-form-field>\n\n</crispr-field-container>\n", styles: [""] }]
+        }] });
+
+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: "13.2.1", ngImport: i0, type: SliderFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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"], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { type: i3$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "color", "tabIndex", "invert", "max", "min", "step", "thumbLabel", "tickInterval", "value", "displayWith", "valueText", "vertical"], outputs: ["change", "input", "valueChange"], exportAs: ["matSlider"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.ControlErrorsDirective, selector: "[formControl], [formControlName]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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 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: "13.2.1", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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: [""], components: [{ type: i1.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"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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", styles: [""] }]
+        }] });
+
+const defaultConfig$2 = {
+    startView: 'month',
+};
+const DatepickerFieldMixin = crisprControlMixin(CrisprFieldComponent);
+class DatepickerFieldComponent extends DatepickerFieldMixin {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig$2;
+    }
+    ngOnInit() {
+        var _a, _b;
+        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 = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.cellClassFunction) || null;
+        this.dateClass$ = this.config.dateClass ? (_b = this.config) === null || _b === void 0 ? void 0 : _b.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: "13.2.1", ngImport: i0, type: DatepickerFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DatepickerFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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-form-field>\n</crispr-field-container>\n\n", styles: [""], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i3$4.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i8.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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-form-field>\n</crispr-field-container>\n\n", styles: [""] }]
+        }] });
+
+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: "13.2.1", ngImport: i0, type: DividerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DividerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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"], components: [{ type: i1$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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"] }]
+        }] });
+
+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: "13.2.1", ngImport: i0, type: RadioFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+RadioFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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"], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i2$2.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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"] }]
+        }] });
+
+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() {
+        var _a, _b;
+        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(((_a = this.config) === null || _a === void 0 ? void 0 : _a.initialDisplayUnit) || null)));
+            this.unitSelectControl.setValue(((_b = this.config) === null || _b === void 0 ? void 0 : _b.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) {
+        var _a;
+        const initialUnitValue = this.config.showUnitSelect ? (_a = this.config) === null || _a === void 0 ? void 0 : _a.initialDisplayUnit : null;
+        this.setInitialDisplayValue(value, initialUnitValue);
+    }
+}
+UnitConversionFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: UnitConversionFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+UnitConversionFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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    <!-- <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  </mat-form-field>\n\n\n</crispr-field-container>\n", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: InfoComponent, selector: "crispr-info", inputs: ["info"] }, { type: i3$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: OptionComponent, selector: "crispr-option", inputs: ["option"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i4$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i7.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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    <!-- <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  </mat-form-field>\n\n\n</crispr-field-container>\n", styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}\n"] }]
+        }] });
+
+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: "13.2.1", ngImport: i0, type: FileDropzoneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FileDropzoneDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.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: "13.2.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']]
+            }] } });
+
+class SelectedFileComponent {
+}
+SelectedFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SelectedFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectedFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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"], components: [{ type: i1$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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 {
+}
+SelectedFileModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SelectedFileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SelectedFileModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SelectedFileModule, declarations: [SelectedFileComponent], imports: [CommonModule,
+        MatProgressBarModule], exports: [SelectedFileComponent] });
+SelectedFileModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SelectedFileModule, imports: [[
+            CommonModule,
+            MatProgressBarModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SelectedFileModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatProgressBarModule
+                    ],
+                    exports: [
+                        SelectedFileComponent
+                    ],
+                    declarations: [
+                        SelectedFileComponent
+                    ]
+                }]
+        }] });
+
+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;
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.disabled$ = this.config.disabledCallback
+            ? this.config.disabledCallback(this.group, this.config)
+            : of(false);
+    }
+    filesChanged(files) {
+        if (files && files.length > 0) {
+            this.selectedFiles = files;
+            this.control.patchValue(files);
+        }
+    }
+    uploadFiles() {
+        if (this.selectedFiles && this.config.uploadFiles) {
+            this.isUploaded = true;
+            this.config.uploadFiles(this.group, this.selectedFiles, this);
+        }
+    }
+    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: "13.2.1", ngImport: i0, type: FileUploadFieldComponent, deps: [{ token: i4$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+FileUploadFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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\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"], components: [{ type: i0.forwardRef(function () { return FieldContainerComponent; }), selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i0.forwardRef(function () { return i2$1.MatFormField; }), selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i0.forwardRef(function () { return i4.MatIcon; }), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i0.forwardRef(function () { return i1.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"] }, { type: i0.forwardRef(function () { return SelectedFileComponent; }), selector: "crispr-selected-file", inputs: ["fileName", "progress", "showProgress", "color"] }], directives: [{ type: i0.forwardRef(function () { return FileDropzoneDirective; }), selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }, { type: i0.forwardRef(function () { return i4$1.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i0.forwardRef(function () { return i4$1.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i0.forwardRef(function () { return i5.ControlErrorContainerDirective; }), selector: "[controlErrorContainer], [formGroup]" }, { type: i0.forwardRef(function () { return i7.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"] }, { type: i0.forwardRef(function () { return i4$1.DefaultValueAccessor; }), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i0.forwardRef(function () { return i4$1.NgControlStatus; }), selector: "[formControlName],[ngModel],[formControl]" }, { type: i0.forwardRef(function () { return i4$1.FormControlName; }), selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i0.forwardRef(function () { return i5.ControlErrorsDirective; }), selector: "[formControl], [formControlName]" }, { type: i0.forwardRef(function () { return i2$1.MatLabel; }), selector: "mat-label" }, { type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i0.forwardRef(function () { return i2.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i0.forwardRef(function () { return i2.AsyncPipe; }) }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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\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$1.NgControl, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Self
+                    }] }];
+    }, propDecorators: { fileInputRef: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+class FileUploadFieldModule {
+}
+FileUploadFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FileUploadFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FileUploadFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.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: "13.2.1", ngImport: i0, type: FileUploadFieldModule, imports: [[
+            CommonModule,
+            FieldContainerModule,
+            ReactiveFormsModule,
+            MatIconModule,
+            MatButtonModule,
+            MatFormFieldModule,
+            MatInputModule,
+            SelectedFileModule,
+            FormValidationHandlerModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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 {
+    // ngControl: NgControl = null;
+    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((file) => __awaiter(this, void 0, void 0, function* () {
+            if (!file)
+                return null;
+            if (typeof file === 'string')
+                return file;
+            const { compressImage, targetCompressedImageFileSizeMb, minCompressionThresholdMb, maxWidthOrHeight, useWebWorker } = this.config;
+            const fileSizeMb = convertBytesToMb(file.size);
+            const shouldCompress = compressImage && targetCompressedImageFileSizeMb < fileSizeMb && minCompressionThresholdMb < fileSizeMb;
+            if (shouldCompress) {
+                const options = Object.assign(Object.assign({}, (maxWidthOrHeight ? { maxWidthOrHeight } : { maxSizeMB: targetCompressedImageFileSizeMb })), { useWebWorker, maxIterations: 30, onProgress: (p) => {
+                        this.progress = p;
+                        this.cdr.detectChanges();
+                    } });
+                return yield imageCompression(file, options);
+            }
+            else
+                return file;
+        })), map((compressedFileOrString) => {
+            if (!compressedFileOrString || typeof compressedFileOrString === 'string')
+                return compressedFileOrString;
+            const { type, name, lastModified } = compressedFileOrString;
+            return new File([compressedFileOrString], this.config.fileName || name, {
+                type,
+                lastModified
+            });
+        }), tap(file => {
+            this.control.setValue(file);
+            if (file || this.value) {
+                this.control.markAsTouched();
+                setTimeout(() => {
+                    this.cdr.detectChanges();
+                }, 100);
+            }
+        }), map(file => typeof file === 'string' ? null : file), shareReplay(1));
+        this.compressedImageUrlString$ = this.compressedFile$.pipe(switchMap((file) => __awaiter(this, void 0, void 0, function* () {
+            if (!file)
+                return null;
+            const compressedStringImage = yield 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))
+        ]).pipe(map(([compressedImageUrlString, controlUrl]) => {
+            return compressedImageUrlString || typeof controlUrl === 'string' && 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];
+            this.control.markAsTouched();
+            this.inputImageFileSubject.next(imageFile);
+        }
+    }
+    clearFileInput() {
+        this.inputImageFileSubject.next(null);
+        this.fileInputRef.nativeElement.value = '';
+        this.control.patchValue(null);
+        this.control.markAsTouched();
+        this.isUploaded = false;
+    }
+    resetToInitialValue(initialValue) {
+        this.inputImageFileSubject.next(initialValue);
+        // this.fileInputRef.nativeElement.value = initialValue
+        this.isUploaded = false;
+    }
+    writeValue(value) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) { }
+}
+ImageUploadFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: ImageUploadFieldComponent, deps: [{ token: i4$1.NgControl, optional: true, self: true }, { token: i2$3.DomSanitizer }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ImageUploadFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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-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"], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: SelectedFileComponent, selector: "crispr-selected-file", inputs: ["fileName", "progress", "showProgress", "color"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i1.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"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.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"] }, { type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.ControlErrorsDirective, selector: "[formControl], [formControlName]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FileDropzoneDirective, selector: "[crisprFileDropzone]", inputs: ["crisprFileDropzone"], outputs: ["fileDrop"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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-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$1.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: "13.2.1", ngImport: i0, type: ImageUploadFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ImageUploadFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.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: "13.2.1", ngImport: i0, type: ImageUploadFieldModule, imports: [[
+            CommonModule,
+            FieldContainerModule,
+            ReactiveFormsModule,
+            MatIconModule,
+            MatButtonModule,
+            MatFormFieldModule,
+            MatInputModule,
+            SelectedFileModule,
+            FileUploadFieldModule,
+            FormValidationHandlerModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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;
+        // control.setErrors({maxFileSize: { maxFileSize, actualFileSize }} )
+        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 } };
+    };
+}
+
+// TODO: Should we import UI library?
+// Will the tree shaker shake the unused modules?
+const MAT_DESIGN_MODULES = [
+    MatIconModule,
+    MatAutocompleteModule,
+    MatDatepickerModule,
+    MatInputModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatChipsModule,
+    MatTooltipModule,
+    MatFormFieldModule,
+    MatMomentDateModule,
+    MatDividerModule,
+    MatProgressBarModule,
+    PortalModule
+];
+const CRISPR_FIELDS = [
+    InputFieldComponent,
+    SelectFieldComponent,
+    RadioFieldComponent,
+    AutocompleteFieldComponent,
+    AutocompleteChiplistFieldComponent,
+    CheckboxFieldComponent,
+    TextareaFieldComponent,
+    DatepickerFieldComponent,
+    SliderFieldComponent,
+    ButtonComponent,
+    DividerComponent,
+    UnitConversionFieldComponent,
+    OptionComponent,
+];
+class MaterialModule {
+}
+MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MaterialModule, declarations: [InputFieldComponent,
+        SelectFieldComponent,
+        RadioFieldComponent,
+        AutocompleteFieldComponent,
+        AutocompleteChiplistFieldComponent,
+        CheckboxFieldComponent,
+        TextareaFieldComponent,
+        DatepickerFieldComponent,
+        SliderFieldComponent,
+        ButtonComponent,
+        DividerComponent,
+        UnitConversionFieldComponent,
+        OptionComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormValidationHandlerModule,
+        InfoModule,
+        FileUploadFieldModule,
+        HeadingModule,
+        FieldContainerModule, MatIconModule,
+        MatAutocompleteModule,
+        MatDatepickerModule,
+        MatInputModule,
+        MatRadioModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatChipsModule,
+        MatTooltipModule,
+        MatFormFieldModule,
+        MatMomentDateModule,
+        MatDividerModule,
+        MatProgressBarModule,
+        PortalModule], exports: [MatIconModule,
+        MatAutocompleteModule,
+        MatDatepickerModule,
+        MatInputModule,
+        MatRadioModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatChipsModule,
+        MatTooltipModule,
+        MatFormFieldModule,
+        MatMomentDateModule,
+        MatDividerModule,
+        MatProgressBarModule,
+        PortalModule, InputFieldComponent,
+        SelectFieldComponent,
+        RadioFieldComponent,
+        AutocompleteFieldComponent,
+        AutocompleteChiplistFieldComponent,
+        CheckboxFieldComponent,
+        TextareaFieldComponent,
+        DatepickerFieldComponent,
+        SliderFieldComponent,
+        ButtonComponent,
+        DividerComponent,
+        UnitConversionFieldComponent,
+        OptionComponent] });
+MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MaterialModule, imports: [[
+            CommonModule,
+            ReactiveFormsModule,
+            FormValidationHandlerModule,
+            InfoModule,
+            FileUploadFieldModule,
+            HeadingModule,
+            FieldContainerModule,
+            ...MAT_DESIGN_MODULES,
+        ], MatIconModule,
+        MatAutocompleteModule,
+        MatDatepickerModule,
+        MatInputModule,
+        MatRadioModule,
+        MatSelectModule,
+        MatCheckboxModule,
+        MatChipsModule,
+        MatSliderModule,
+        MatSlideToggleModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatChipsModule,
+        MatTooltipModule,
+        MatFormFieldModule,
+        MatMomentDateModule,
+        MatDividerModule,
+        MatProgressBarModule,
+        PortalModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: MaterialModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormValidationHandlerModule,
+                        InfoModule,
+                        FileUploadFieldModule,
+                        HeadingModule,
+                        FieldContainerModule,
+                        ...MAT_DESIGN_MODULES,
+                    ],
+                    exports: [
+                        ...MAT_DESIGN_MODULES,
+                        ...CRISPR_FIELDS
+                    ],
+                    declarations: [
+                        ...CRISPR_FIELDS,
+                    ]
+                }]
+        }] });
+
+var index$2 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    InputFieldComponent: InputFieldComponent,
+    SelectFieldComponent: SelectFieldComponent,
+    AutocompleteFieldComponent: AutocompleteFieldComponent,
+    AutocompleteChiplistFieldComponent: AutocompleteChiplistFieldComponent,
+    CheckboxFieldComponent: CheckboxFieldComponent,
+    TextareaFieldComponent: TextareaFieldComponent,
+    SliderFieldComponent: SliderFieldComponent,
+    ButtonComponent: ButtonComponent,
+    DatepickerFieldComponent: DatepickerFieldComponent,
+    HeadingComponent: HeadingComponent,
+    HeadingModule: HeadingModule,
+    DividerComponent: DividerComponent,
+    RadioFieldComponent: RadioFieldComponent,
+    UnitConversionFieldComponent: UnitConversionFieldComponent,
+    ImageUploadFieldComponent: ImageUploadFieldComponent,
+    ImageUploadFieldModule: ImageUploadFieldModule,
+    maxFileSizeValidator: maxFileSizeValidator,
+    allowedFileExtValidator: allowedFileExtValidator,
+    FileDropzoneDirective: FileDropzoneDirective,
+    FileUploadFieldComponent: FileUploadFieldComponent,
+    FileUploadFieldModule: FileUploadFieldModule,
+    MaterialModule: MaterialModule,
+    OptionComponent: OptionComponent
+});
+
+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 isControlConfig(component.config) || component.config.controlType === ControlType.BUTTON;
+}
+
+class CrisprFieldDirective {
+    constructor(container, renderer, cdr) {
+        this.container = container;
+        this.renderer = renderer;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            /**
+             * create component and set values from config on its instance
+             */
+            const component = this.config.component || (yield FIELD_COMPONENTS[this.config.controlType]);
+            const componentRef = this.container.createComponent(component);
+            this.component = componentRef.instance;
+            this.component.config = this.config;
+            if (isControlComponent(this.component)) {
+                this.component.group = this.group;
+                if ('value' in this.component) {
+                    this.component.value = this.value;
+                }
+            }
+            this.cdr.detectChanges();
+            // 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);
+                }
+            });
+        });
+    }
+}
+CrisprFieldDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+CrisprFieldDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.1", type: CrisprFieldDirective, selector: "[crisprField]", inputs: { config: "config", group: "group", value: "value" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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: "13.2.1", ngImport: i0, type: CrisprFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CrisprFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldModule, declarations: [CrisprFieldDirective], imports: [CommonModule], exports: [CrisprFieldDirective] });
+CrisprFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldModule, imports: [[
+            CommonModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                    ],
+                    exports: [
+                        CrisprFieldDirective
+                    ],
+                    declarations: [
+                        CrisprFieldDirective
+                    ]
+                }]
+        }] });
+
+class InitialControlValuePipe {
+    // TODO: does changing any to unknown break anything?
+    transform(initialFormValue, fieldConfig) {
+        return (initialFormValue && isControlConfig(fieldConfig))
+            ? initialFormValue[fieldConfig.controlName] || null
+            : null;
+    }
+}
+InitialControlValuePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InitialControlValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+InitialControlValuePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InitialControlValuePipe, name: "initialControlValue" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: InitialControlValuePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'initialControlValue'
+                }]
+        }] });
+
+class CrisprFormComponent {
+    constructor() {
+        this.form = new FormGroup({});
+        this.value = null;
+        this.submitted = new EventEmitter();
+        // proxy value and status change events through to consuming component
+        this.valueChanges = this.form.valueChanges;
+        this.statusChanges = this.form.statusChanges;
+        this.subs = [];
+    }
+    ngOnInit() {
+        // build out the form, note that we pass in the form as the third argument and the function modifies it
+        buildFormGroupFromConfig(this.config, this.value, this.form);
+    }
+    handleSubmit() {
+        this.form.markAllAsTouched();
+        this.submitted.emit(this.form);
+    }
+    triggerSubmit() {
+        this.submitTrigger.nativeElement.click();
+    }
+}
+CrisprFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CrisprFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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"], directives: [{ type: i4$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5.ControlErrorsFormDirective, selector: "form", inputs: ["errorDictionary"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": InitialControlValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-form', changeDetection: ChangeDetectionStrategy.OnPush, 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: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], submitted: [{
+                type: Output
+            }], valueChanges: [{
+                type: Output
+            }], statusChanges: [{
+                type: Output
+            }], submitTrigger: [{
+                type: ViewChild,
+                args: ['submitTrigger']
+            }] } });
+
+const defaultConfig = {
+    addButtonLabel: 'ADD ITEM',
+    minListLength: 1,
+};
+const FormGroupListMixin = crisprControlMixin(CrisprFieldComponent);
+class FormGroupListComponent extends FormGroupListMixin {
+    constructor() {
+        super(...arguments);
+        this.defaultConfig = defaultConfig;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // TODO: this is required to ngFor of controls in template, must be a better way
+        this.formArray = this.control;
+    }
+    setControlValue(values) {
+        if (this.control) {
+            if ((values === null || values === void 0 ? void 0 : values.length) > 0) {
+                values.forEach(value => this.addGroup(value));
+            }
+            else if (this.config.displayInitialItem) {
+                this.addGroup();
+            }
+        }
+    }
+    addGroup(value = null) {
+        this.control.push(createControlForType(this.config.itemConfig, value));
+    }
+    deleteGroup(index) {
+        this.control.removeAt(index);
+    }
+}
+FormGroupListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+FormGroupListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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    <!-- TODO: add sortBy function -->\n    <div *ngFor=\"let control of formArray?.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\" *ngIf=\"config.itemLabelBuilder\"> {{  config.itemLabelBuilder(i) }} </span>\n        <button\n          mat-icon-button\n          *ngIf=\"i + 1 > config.minListLength\">\n          <mat-icon (click)=\"deleteGroup(i)\">delete</mat-icon>\n        </button>\n      </div>\n      <div\n        [formGroupName]=\"i\">\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [config]=\"field\"\n          [value]=\"value && value[i] | initialControlValue : field\"\n          [group]=\"control\">\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)=\"addGroup()\">\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"], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }, { type: i1.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"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.ControlErrorContainerDirective, selector: "[controlErrorContainer], [formGroup]" }, { type: i4$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": InitialControlValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.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    <!-- TODO: add sortBy function -->\n    <div *ngFor=\"let control of formArray?.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\" *ngIf=\"config.itemLabelBuilder\"> {{  config.itemLabelBuilder(i) }} </span>\n        <button\n          mat-icon-button\n          *ngIf=\"i + 1 > config.minListLength\">\n          <mat-icon (click)=\"deleteGroup(i)\">delete</mat-icon>\n        </button>\n      </div>\n      <div\n        [formGroupName]=\"i\">\n        <ng-container\n          *ngFor=\"let field of config.itemConfig.fields;\"\n          crisprField\n          [config]=\"field\"\n          [value]=\"value && value[i] | initialControlValue : field\"\n          [group]=\"control\">\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)=\"addGroup()\">\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"] }]
+        }] });
+
+class CrisprPipesModule {
+}
+CrisprPipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CrisprPipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprPipesModule, declarations: [InitialControlValuePipe], imports: [CommonModule], exports: [InitialControlValuePipe] });
+CrisprPipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprPipesModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprPipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        InitialControlValuePipe
+                    ],
+                    declarations: [
+                        InitialControlValuePipe
+                    ]
+                }]
+        }] });
+
+class FormGroupListModule {
+}
+FormGroupListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FormGroupListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.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: "13.2.1", ngImport: i0, type: FormGroupListModule, imports: [[
+            CommonModule,
+            MatButtonModule,
+            MatIconModule,
+            FieldContainerModule,
+            ReactiveFormsModule,
+            CrisprFieldModule,
+            CrisprPipesModule,
+            FormValidationHandlerModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: FormGroupListModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        FieldContainerModule,
+                        ReactiveFormsModule,
+                        CrisprFieldModule,
+                        CrisprPipesModule,
+                        FormValidationHandlerModule
+                    ],
+                    exports: [
+                        FormGroupListComponent
+                    ],
+                    declarations: [
+                        FormGroupListComponent
+                    ]
+                }]
+        }] });
+
+var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FormGroupListComponent: FormGroupListComponent,
+    FormGroupListModule: FormGroupListModule
+});
+
+const FormGroupMixin = crisprControlMixin(CrisprFieldComponent);
+class SubGroupComponent extends FormGroupMixin {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+}
+SubGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SubGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SubGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.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: [""], components: [{ type: FieldContainerComponent, selector: "crispr-field-container", inputs: ["config", "group", "inlineField"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: CrisprFieldDirective, selector: "[crisprField]", inputs: ["config", "group", "value"] }], pipes: { "initialControlValue": InitialControlValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, preserveWhitespaces: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SubGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'crispr-sub-group', changeDetection: ChangeDetectionStrategy.OnPush, 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: [""] }]
+        }] });
+
+class SubGroupModule {
+}
+SubGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SubGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SubGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SubGroupModule, declarations: [SubGroupComponent], imports: [CommonModule,
+        CrisprFieldModule,
+        FieldContainerModule,
+        CrisprPipesModule,
+        // TODO: Does this need to be here?
+        FormValidationHandlerModule], exports: [SubGroupComponent] });
+SubGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SubGroupModule, imports: [[
+            CommonModule,
+            CrisprFieldModule,
+            FieldContainerModule,
+            CrisprPipesModule,
+            // TODO: Does this need to be here?
+            FormValidationHandlerModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: SubGroupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        CrisprFieldModule,
+                        FieldContainerModule,
+                        CrisprPipesModule,
+                        // TODO: Does this need to be here?
+                        FormValidationHandlerModule
+                    ],
+                    exports: [
+                        SubGroupComponent
+                    ],
+                    declarations: [
+                        SubGroupComponent
+                    ]
+                }]
+        }] });
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SubGroupComponent: SubGroupComponent,
+    SubGroupModule: SubGroupModule
+});
+
+class CrisprFormsModule {
+}
+CrisprFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CrisprFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormsModule, declarations: [CrisprFormComponent], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormValidationHandlerModule,
+        FormGroupListModule,
+        FieldContainerModule,
+        CrisprFieldModule,
+        SubGroupModule,
+        MaterialModule,
+        CrisprPipesModule], exports: [CrisprFormComponent,
+        FieldContainerModule,
+        MaterialModule] });
+CrisprFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormsModule, imports: [[
+            CommonModule,
+            ReactiveFormsModule,
+            FormValidationHandlerModule,
+            FormGroupListModule,
+            FieldContainerModule,
+            CrisprFieldModule,
+            SubGroupModule,
+            MaterialModule,
+            CrisprPipesModule,
+        ], FieldContainerModule,
+        MaterialModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.1", ngImport: i0, type: CrisprFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormValidationHandlerModule,
+                        FormGroupListModule,
+                        FieldContainerModule,
+                        CrisprFieldModule,
+                        SubGroupModule,
+                        MaterialModule,
+                        CrisprPipesModule,
+                    ],
+                    declarations: [
+                        CrisprFormComponent,
+                    ],
+                    exports: [
+                        CrisprFormComponent,
+                        FieldContainerModule,
+                        MaterialModule
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AbstractAutocompleteComponent, AutocompleteChiplistFieldComponent, AutocompleteFieldComponent, ButtonComponent, CheckboxFieldComponent, ControlType, CrisprFieldComponent, CrisprFormComponent, CrisprFormsModule, DEFAULT_EMPTY_OPTIONS_MESSAGE, DatepickerFieldComponent, DividerComponent, FieldContainerComponent, FieldContainerModule, FileDropzoneDirective, FileUploadFieldComponent, FileUploadFieldModule, HeadingComponent, HeadingModule, ImageUploadFieldComponent, ImageUploadFieldModule, InputFieldComponent, MaterialModule, OptionComponent, RadioFieldComponent, SelectFieldComponent, SliderFieldComponent, TextareaFieldComponent, UnitConversionFieldComponent, allowedFileExtValidator, buildFormGroupFromConfig, callOptionsIfFunction, checkControlForValues, checkControlsForValues, computeValueFromFields, createControlForType, crisprControlMixin, filterOptionsByLabel, isControlConfig, maxFileSizeValidator, observablifyOptions };
+//# sourceMappingURL=tft-crispr-forms.mjs.map