@tft/crispr-forms 12.2.22 → 13.0.3

package/fesm2015/tft-crispr-forms.js

@@ -1,1266 +0,0 @@
-import { of, combineLatest, from, isObservable, BehaviorSubject } from 'rxjs';
-import { FormGroup, FormArray, FormControl, NgControl, ReactiveFormsModule } from '@angular/forms';
-import { map, startWith, debounceTime, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';
-import { Directive, Component, ChangeDetectionStrategy, ViewChild, Optional, Self, Input, EventEmitter, Output, HostListener, NgModule, ComponentFactoryResolver, ViewContainerRef, Renderer2, Pipe } from '@angular/core';
-import { MatSelectModule } from '@angular/material/select';
-import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
-import { ENTER } from '@angular/cdk/keycodes';
-import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { FormValidationHandlerModule } from '@tft/form-validation-handler';
-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["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.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.decorators = [
-    { type: Directive }
-];
-
-const InputFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class InputFieldComponent extends InputFieldMixin {
-    constructor() {
-        super();
-        this.defaultConfig = { inputType: 'text' };
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-InputFieldComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-input-field',
-                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      [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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-InputFieldComponent.ctorParameters = () => [];
-
-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.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-select-field',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["mat-checkbox{display:block;padding:16px}"]
-            },] }
-];
-SelectFieldComponent.propDecorators = {
-    selectField: [{ type: ViewChild, args: ['selectField',] }]
-};
-
-const defaultConfig$8 = {
-    autoActiveFirstOption: true,
-    typeDebounceTime: 500,
-    emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE
-};
-class AutocompleteFieldComponent extends AbstractAutocompleteComponent {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$8;
-    }
-    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.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-autocomplete-field',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-AutocompleteFieldComponent.propDecorators = {
-    autoInput: [{ type: ViewChild, args: ['autoInput', { read: MatAutocompleteTrigger },] }],
-    autoInputRef: [{ type: ViewChild, args: ['autoInput',] }]
-};
-
-const ɵ0 = (chip, option) => chip.value === option.value;
-const defaultConfig$7 = {
-    chipsSelectable: true,
-    areChipsRemovable: true,
-    tabToSelect: true,
-    autoActiveFirstOption: true,
-    imageUrlParam: 'image',
-    typeDebounceTime: 500,
-    allowDuplicates: false,
-    duplicateCompareFunction: ɵ0,
-    separatorKeyCodes: [ENTER],
-    emptyOptionsMessage: DEFAULT_EMPTY_OPTIONS_MESSAGE,
-};
-class AutocompleteChiplistFieldComponent extends AbstractAutocompleteComponent {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$7;
-        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.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-autocomplete-chiplist-field',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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%;-o-object-fit:cover;object-fit:cover}"]
-            },] }
-];
-AutocompleteChiplistFieldComponent.propDecorators = {
-    chipInput: [{ type: ViewChild, args: ['autoInput', { read: MatAutocompleteTrigger },] }],
-    chipInputRef: [{ type: ViewChild, args: ['autoInput',] }]
-};
-
-const defaultConfig$6 = {
-    labelPosition: 'after',
-    inline: false
-};
-const CheckboxFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class CheckboxFieldComponent extends CheckboxFieldMixin {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$6;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-CheckboxFieldComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-checkbox-field',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-
-const defaultConfig$5 = { rows: 5 };
-const TextareaFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class TextareaFieldComponent extends TextareaFieldMixin {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$5;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-TextareaFieldComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-textarea-field',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-
-const defaultConfig$4 = { displayLimits: true };
-const SliderFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class SliderFieldComponent extends SliderFieldMixin {
-    constructor() {
-        super();
-        this.defaultConfig = defaultConfig$4;
-    }
-    get flexDirection() {
-        return this.config.vertical ? 'column' : 'row';
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-SliderFieldComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-slider-field',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".slider-container{display:flex;align-items:center}.slider-container .mat-slider-horizontal{width:100%}"]
-            },] }
-];
-SliderFieldComponent.ctorParameters = () => [];
-
-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.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-button',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-
-const defaultConfig$3 = {
-    startView: 'month',
-};
-const DatepickerFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class DatepickerFieldComponent extends DatepickerFieldMixin {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$3;
-        // handleSelectedChange(event, picker: MatDatepicker<unknown>) {
-        //   console.log({event, picker})
-        //   if(this.config.selectedChange) {
-        //     this.config.selectedChange(event, picker);
-        //   }
-        // }
-    }
-    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.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-datepicker-field',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-
-const FileUploadFieldMixin = crisprControlMixin(CrisprFieldComponent);
-class FileUploadComponent 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) {
-    }
-}
-FileUploadComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-file-upload',
-                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\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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                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}"]
-            },] }
-];
-FileUploadComponent.ctorParameters = () => [
-    { type: NgControl, decorators: [{ type: Optional }, { type: Self }] }
-];
-FileUploadComponent.propDecorators = {
-    fileInputRef: [{ type: ViewChild, args: ['fileInput',] }]
-};
-
-const defaultConfig$2 = {
-    typographyClass: 'mat-h3'
-};
-class HeadingComponent extends CrisprFieldComponent {
-    constructor() {
-        super(...arguments);
-        this.defaultConfig = defaultConfig$2;
-    }
-}
-HeadingComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-heading',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:block}"]
-            },] }
-];
-HeadingComponent.propDecorators = {
-    config: [{ type: Input }]
-};
-
-class DividerComponent extends CrisprFieldComponent {
-    constructor() {
-        super(...arguments);
-        // TODO: pull in type after configs are better organized
-        this.defaultConfig = {};
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-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}"]
-            },] }
-];
-
-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.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-radio-field',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["mat-radio-button{padding:12px}"]
-            },] }
-];
-
-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.decorators = [
-    { type: Component, args: [{
-                // eslint-disable-next-line @angular-eslint/component-selector
-                selector: 'crispr-unit-conversion-field',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".unit-field{width:40%;margin-left:16px}:host ::ng-deep .field-container{display:flex}"]
-            },] }
-];
-
-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.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-field-container',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["::ng-deep mat-form-field.mat-form-field{display:block}.inline-field{display:inline-block}"]
-            },] }
-];
-FieldContainerComponent.propDecorators = {
-    config: [{ type: Input }],
-    group: [{ type: Input }],
-    inlineField: [{ type: Input }]
-};
-
-class InfoComponent {
-}
-InfoComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-info',
-                template: "<mat-icon\n  *ngIf=\"info\"\n  [matTooltip]=\"info.content\"\n  [matTooltipPosition]=\"info.tooltipPosition || 'below'\"\n  matSuffix>\n  info\n</mat-icon>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: ["mat-icon{font-size:1.2em;width:1em;height:1em;opacity:.8}"]
-            },] }
-];
-InfoComponent.propDecorators = {
-    info: [{ type: Input }]
-};
-
-class OptionComponent {
-}
-OptionComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-option',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-OptionComponent.propDecorators = {
-    option: [{ type: Input }]
-};
-
-class SelectedFileComponent {
-}
-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}"]
-            },] }
-];
-SelectedFileComponent.propDecorators = {
-    fileName: [{ type: Input }],
-    progress: [{ type: Input }],
-    showProgress: [{ type: Input }],
-    color: [{ type: Input }]
-};
-
-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.decorators = [
-    { type: Directive, args: [{
-                selector: '[crisprFileDropzone]'
-            },] }
-];
-FileDropzoneDirective.propDecorators = {
-    fileDrop: [{ type: Output }],
-    crisprFileDropzone: [{ type: Input }],
-    onDrop: [{ type: HostListener, args: ['drop', ['$event'],] }],
-    onDragOver: [{ type: HostListener, args: ['dragover', ['$event'],] }]
-};
-
-// 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 = [
-    FieldContainerComponent,
-    InputFieldComponent,
-    SelectFieldComponent,
-    RadioFieldComponent,
-    AutocompleteFieldComponent,
-    AutocompleteChiplistFieldComponent,
-    CheckboxFieldComponent,
-    TextareaFieldComponent,
-    DatepickerFieldComponent,
-    SliderFieldComponent,
-    ButtonComponent,
-    HeadingComponent,
-    DividerComponent,
-    FileUploadComponent,
-    UnitConversionFieldComponent
-];
-class MaterialModule {
-}
-MaterialModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    ReactiveFormsModule,
-                    FormValidationHandlerModule,
-                    ...MAT_DESIGN_MODULES,
-                ],
-                exports: [
-                    ...MAT_DESIGN_MODULES,
-                    ...CRISPR_FIELDS
-                ],
-                declarations: [
-                    ...CRISPR_FIELDS,
-                    InfoComponent,
-                    OptionComponent,
-                    SelectedFileComponent,
-                    FileDropzoneDirective,
-                ],
-                entryComponents: CRISPR_FIELDS
-            },] }
-];
-
-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);
-    }
-}
-CrisprFormComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-form',
-                template: "<form\n  class=\"crispr-form\"\n  [ngClass]=\"config.classes\"\n  [formGroup]=\"form\"\n  (ngSubmit)=\"handleSubmit()\"\n  [autocomplete]=\"config.autocomplete || 'off'\"\n  [errorDictionary]=\"config.errorDictionary\">\n\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\n</form>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-CrisprFormComponent.propDecorators = {
-    config: [{ type: Input }],
-    form: [{ type: Input }],
-    value: [{ type: Input }],
-    submitted: [{ type: Output }],
-    valueChanges: [{ type: Output }],
-    statusChanges: [{ type: Output }]
-};
-
-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.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-form-group-list',
-                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",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".item-header{display:flex;justify-content:space-between}.group-footer{display:flex;justify-content:flex-end}.group-footer button.add{margin-bottom:16px}"]
-            },] }
-];
-
-const FormGroupMixin = crisprControlMixin(CrisprFieldComponent);
-class SubGroupComponent extends FormGroupMixin {
-    ngOnInit() {
-        super.ngOnInit();
-    }
-}
-SubGroupComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'crispr-sub-group',
-                template: "<crispr-field-container\n  [config]=\"config\"\n  [group]=\"group\">\n  <ng-container\n    *ngFor=\"let fieldConfig of config.fields;\"\n    crisprField\n    [value]=\"value | initialControlValue : fieldConfig\"\n    [config]=\"fieldConfig\"\n    [group]=\"control\">\n  </ng-container>\n</crispr-field-container>\n\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [""]
-            },] }
-];
-
-// tslint:disable-next-line: max-line-length
-const FIELD_COMPONENTS = {
-    button: ButtonComponent,
-    input: InputFieldComponent,
-    select: SelectFieldComponent,
-    radio: RadioFieldComponent,
-    subGroup: SubGroupComponent,
-    groupList: FormGroupListComponent,
-    autocomplete: AutocompleteFieldComponent,
-    autocompleteChiplist: AutocompleteChiplistFieldComponent,
-    textarea: TextareaFieldComponent,
-    checkbox: CheckboxFieldComponent,
-    slider: SliderFieldComponent,
-    datepicker: DatepickerFieldComponent,
-    fileUpload: FileUploadComponent,
-    heading: HeadingComponent,
-    divider: DividerComponent,
-    unitConversion: UnitConversionFieldComponent
-};
-function isControlComponent(component) {
-    return isControlConfig(component.config) || component.config.controlType === ControlType.BUTTON;
-}
-
-class CrisprFieldDirective {
-    constructor(resolver, container, renderer) {
-        this.resolver = resolver;
-        this.container = container;
-        this.renderer = renderer;
-    }
-    ngOnInit() {
-        /**
-         * create component and set values from config on its instance
-         */
-        const component = this.config.component || FIELD_COMPONENTS[this.config.controlType];
-        const factory = this.resolver.resolveComponentFactory(component);
-        const componentRef = this.container.createComponent(factory);
-        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;
-            }
-        }
-        // 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.decorators = [
-    { type: Directive, args: [{
-                selector: '[crisprField]'
-            },] }
-];
-CrisprFieldDirective.ctorParameters = () => [
-    { type: ComponentFactoryResolver },
-    { type: ViewContainerRef },
-    { type: Renderer2 }
-];
-CrisprFieldDirective.propDecorators = {
-    config: [{ type: Input }],
-    group: [{ type: Input }],
-    value: [{ type: Input }]
-};
-
-class InitialControlValuePipe {
-    // TODO: does changing any to unknown break anything?
-    transform(initialFormValue, fieldConfig) {
-        return (initialFormValue && isControlConfig(fieldConfig))
-            ? initialFormValue[fieldConfig.controlName] || null
-            : null;
-    }
-}
-InitialControlValuePipe.decorators = [
-    { type: Pipe, args: [{
-                name: 'initialControlValue'
-            },] }
-];
-
-class CrisprFormsModule {
-}
-CrisprFormsModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CommonModule,
-                    ReactiveFormsModule,
-                    FormValidationHandlerModule,
-                    MaterialModule
-                ],
-                declarations: [
-                    CrisprFieldDirective,
-                    CrisprFormComponent,
-                    FormGroupListComponent,
-                    InitialControlValuePipe,
-                    SubGroupComponent,
-                ],
-                exports: [
-                    CrisprFormComponent,
-                    MaterialModule
-                ],
-                entryComponents: [
-                    FormGroupListComponent,
-                    SubGroupComponent
-                ],
-            },] }
-];
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { AbstractAutocompleteComponent, AutocompleteChiplistFieldComponent, AutocompleteFieldComponent, ButtonComponent, CheckboxFieldComponent, ControlType, CrisprFieldComponent, CrisprFormComponent, CrisprFormsModule, DEFAULT_EMPTY_OPTIONS_MESSAGE, DatepickerFieldComponent, DividerComponent, FileUploadComponent, HeadingComponent, InputFieldComponent, RadioFieldComponent, SelectFieldComponent, SliderFieldComponent, TextareaFieldComponent, UnitConversionFieldComponent, buildFormGroupFromConfig, callOptionsIfFunction, checkControlForValues, checkControlsForValues, computeValueFromFields, createControlForType, crisprControlMixin, filterOptionsByLabel, isControlConfig, observablifyOptions, ɵ0, MaterialModule as ɵa, FieldContainerComponent as ɵb, InputFieldComponent as ɵc, SelectFieldComponent as ɵd, RadioFieldComponent as ɵe, AutocompleteFieldComponent as ɵf, AbstractAutocompleteComponent as ɵg, AutocompleteChiplistFieldComponent as ɵh, CheckboxFieldComponent as ɵi, TextareaFieldComponent as ɵj, DatepickerFieldComponent as ɵk, SliderFieldComponent as ɵl, ButtonComponent as ɵm, CrisprFieldComponent as ɵn, HeadingComponent as ɵo, DividerComponent as ɵp, FileUploadComponent as ɵq, UnitConversionFieldComponent as ɵr, InfoComponent as ɵs, OptionComponent as ɵt, SelectedFileComponent as ɵu, FileDropzoneDirective as ɵv, CrisprFieldDirective as ɵw, FormGroupListComponent as ɵx, InitialControlValuePipe as ɵy, SubGroupComponent as ɵz };
-//# sourceMappingURL=tft-crispr-forms.js.map